@credithub/harlan-components 1.102.0 → 1.103.0

package/dist/components/common/printButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PrintButtonProps {
+    onClick?: () => void;
+    isLoading?: boolean;
+    tooltipMessage?: string;
+}
+declare const PrintButton: React.FC<PrintButtonProps>;
+export default PrintButton;

package/dist/components/common/printButton.js

@@ -0,0 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import BtnWrapper from '../../assets/btn/btnWrapper';
+import PrintIcon from '../../assets/btn/printIcon';
+import Tooltip from '../../components/common/tooltip';
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+// Animação de rotação do spinner
+var spin = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+// Container para garantir tamanho fixo e evitar layout shift
+var IconContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n"])));
+// Spinner estilizado com tamanho similar ao PrintIcon
+var Spinner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-left-color: ", ";\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  animation: ", " 0.8s linear infinite;\n"], ["\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-left-color: ", ";\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  animation: ", " 0.8s linear infinite;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaEscuro;
+}, spin);
+var TooltipWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* Oculta o tooltip na impress\u00E3o */\n  @media print {\n    display: none !important;\n  }\n"], ["\n  /* Oculta o tooltip na impress\u00E3o */\n  @media print {\n    display: none !important;\n  }\n"])));
+var TooltipContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+var TooltipTitle = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: 600;\n  font-size: 14px;\n  color: ", ";\n"], ["\n  font-weight: 600;\n  font-size: 14px;\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.azulCredithub;
+});
+var TooltipMessage = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 13px;\n  line-height: 1.4;\n"], ["\n  font-size: 13px;\n  line-height: 1.4;\n"])));
+var PrintButton = function (_a) {
+    var onClick = _a.onClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.tooltipMessage, tooltipMessage = _c === void 0 ? 'Aguardando consultas finalizarem...' : _c;
+    var button = (React.createElement(BtnWrapper, { onClick: !isLoading ? onClick : undefined },
+        React.createElement(IconContainer, null, isLoading ? React.createElement(Spinner, null) : React.createElement(PrintIcon, null))));
+    if (isLoading) {
+        return (React.createElement(TooltipWrapper, null,
+            React.createElement(Tooltip, { placement: "left", content: React.createElement(TooltipContent, null,
+                    React.createElement(TooltipTitle, null, "\u23F3 Aguardando estabiliza\u00E7\u00E3o"),
+                    React.createElement(TooltipMessage, null, tooltipMessage)), icon: button })));
+    }
+    return button;
+};
+export default PrintButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/consultaSimplesSection/consultaSimplesSection.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import ConsultaSimplesIcon from '../../assets/icones/consultaSimples';
 import { useGlobalData } from '../../contexts/globalDataContext';
 import { usePostHog } from '../../contexts/PostHogContext';
+import usePrintWhenStable from '../../hooks/usePrintWhenStable';
 import theme from '../../styles/theme';
 import { formatMoney } from '../../utils/number';
 import { formatDocument } from '../../utils/string';
@@ -43,10 +44,26 @@ var spin = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObjec
 var Spinner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-left-color: #222;\n  border-radius: 50%;\n  width: 9px;\n  height: 9px;\n  animation: ", " 1s linear infinite;\n  margin-right: 8px;\n  display: inline-block;\n  vertical-align: middle;\n"], ["\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-left-color: #222;\n  border-radius: 50%;\n  width: 9px;\n  height: 9px;\n  animation: ", " 1s linear infinite;\n  margin-right: 8px;\n  display: inline-block;\n  vertical-align: middle;\n"])), spin);
 var ConsultaSimplesSection = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var documento = _a.documento, children = _a.children, onClose = _a.onClose, isFinancial = _a.isFinancial, ctime = _a.ctime, printMode = _a.printMode, rest = __rest(_a, ["documento", "children", "onClose", "isFinancial", "ctime", "printMode"]);
+    var documento = _a.documento, children = _a.children, onClose = _a.onClose, onClickPrint = _a.onClickPrint, isFinancial = _a.isFinancial, ctime = _a.ctime, printMode = _a.printMode, rest = __rest(_a, ["documento", "children", "onClose", "onClickPrint", "isFinancial", "ctime", "printMode"]);
     var ctx = useContext(Queries.Finder);
     var data = useGlobalData().data;
     var posthog = usePostHog().posthog;
+    // Hook para observar mutações no DOM e imprimir quando estável
+    var _s = usePrintWhenStable({
+        debounceTime: 500,
+        maxWaitTime: 30000,
+        onStart: function () {
+            console.log('ConsultaSimples: Aguardando DOM estabilizar para impressão...');
+        },
+        onStable: function () {
+            console.log('ConsultaSimples: DOM estável, iniciando impressão');
+            onClickPrint === null || onClickPrint === void 0 ? void 0 : onClickPrint();
+        }
+    }), printWhenStable = _s.printWhenStable, isWaiting = _s.isWaiting;
+    // Handler que usa o observer ao invés de imprimir diretamente
+    var handlePrint = function () {
+        printWhenStable();
+    };
     // Extraindo valores do globalData
     var receitaStatus = ((_c = (_b = data.dossie) === null || _b === void 0 ? void 0 : _b.summary) === null || _c === void 0 ? void 0 : _c.receitaStatus) &&
         ['ATIVA', 'REGULAR'].indexOf(data.dossie.summary.receitaStatus) === -1
@@ -133,7 +150,7 @@ var ConsultaSimplesSection = function (_a) {
                 }); })
             });
     }, [posthog, pendencias]);
-    return (React.createElement(Section, __assign({ title: "Consulta Simples", subtitle: "Consulta de informa\u00E7\u00F5es do documento.", description: React.createElement(React.Fragment, null,
+    return (React.createElement(Section, __assign({ title: "Consulta Simples", subtitle: "Consulta de informa\u00E7\u00F5es do documento.", onClickPrint: handlePrint, isPrintLoading: isWaiting, printLoadingMessage: "O sistema est\u00E1 verificando se todas as consultas foram conclu\u00EDdas. Por favor, aguarde...", description: React.createElement(React.Fragment, null,
             ctimeDate ? (React.createElement(StatusMessage, { type: "warning" },
                 React.createElement(WarningCircle, { weight: "fill", size: 18, color: theme.colors.cinzaEscuro, style: { marginRight: 6, verticalAlign: 'text-bottom' } }),
                 "Informa\u00E7\u00F5es referem-se a",

package/dist/components/interface/section.d.ts

@@ -8,6 +8,8 @@ export interface SectionProps extends React.PropsWithChildren<{
     contentClassName?: string;
     ctx?: RequestContext<any>;
     printMode?: boolean;
+    isPrintLoading?: boolean;
+    printLoadingMessage?: string;
 } & HeaderProps> {
 }
 declare const Section: React.FC<SectionProps>;

package/dist/components/interface/section.js

@@ -7,7 +7,7 @@ import BtnWrapper from '../../assets/btn/btnWrapper';
 import ChevronDown from '../../assets/btn/chevronDown';
 import ChevronUp from '../../assets/btn/chevronUp';
 import CloseIcon from '../../assets/btn/closeIcon';
-import PrintIcon from '../../assets/btn/printIcon';
+import PrintButton from '../../components/common/printButton';
 import useToggle from '../../hooks/useToggle';
 import classNames from 'classnames';
 import React from 'react';
@@ -16,14 +16,13 @@ import Header from './header';
 var SectionContaner = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media screen {\n    background-color: rgb(239, 239, 239);\n  }\n  page-break-before: avoid;\n  page-break-after: avoid;\n  page-break-inside: avoid;\n"], ["\n  @media screen {\n    background-color: rgb(239, 239, 239);\n  }\n  page-break-before: avoid;\n  page-break-after: avoid;\n  page-break-inside: avoid;\n"])));
 var ResultContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  position: relative;\n  margin-top: 20px;\n  flex-direction: column;\n  row-gap: 20px;\n  @media screen {\n    background-color: #efefef;\n  }\n"], ["\n  display: ", ";\n  position: relative;\n  margin-top: 20px;\n  flex-direction: column;\n  row-gap: 20px;\n  @media screen {\n    background-color: #efefef;\n  }\n"])), function (props) { return (props.hide ? 'none' : 'flex'); });
 var Section = function (_a) {
-    var title = _a.title, subtitle = _a.subtitle, description = _a.description, _b = _a.minimized, minimized = _b === void 0 ? false : _b, onClose = _a.onClose, variant = _a.variant, loadingProps = _a.loadingProps, icon = _a.icon, actions = _a.actions, children = _a.children, onClickPrint = _a.onClickPrint, className = _a.className, contentClassName = _a.contentClassName, _c = _a.printMode, printMode = _c === void 0 ? false : _c;
-    var _d = useToggle(!minimized), isOpen = _d[0], toggleOpen = _d[1];
+    var title = _a.title, subtitle = _a.subtitle, description = _a.description, _b = _a.minimized, minimized = _b === void 0 ? false : _b, onClose = _a.onClose, variant = _a.variant, loadingProps = _a.loadingProps, icon = _a.icon, actions = _a.actions, children = _a.children, onClickPrint = _a.onClickPrint, className = _a.className, contentClassName = _a.contentClassName, _c = _a.printMode, printMode = _c === void 0 ? false : _c, _d = _a.isPrintLoading, isPrintLoading = _d === void 0 ? false : _d, printLoadingMessage = _a.printLoadingMessage;
+    var _e = useToggle(!minimized), isOpen = _e[0], toggleOpen = _e[1];
     var sectionClass = classNames(className);
     var sectionContentClass = classNames(contentClassName);
     return (React.createElement(SectionContaner, { className: sectionClass },
         React.createElement(Header, { title: title, subtitle: subtitle, description: description, loadingProps: loadingProps, icon: icon, variant: variant, actions: !printMode ? (React.createElement(React.Fragment, null,
-                React.createElement(BtnWrapper, null,
-                    React.createElement(PrintIcon, { onClick: onClickPrint })),
+                React.createElement(PrintButton, { onClick: onClickPrint, isLoading: isPrintLoading, tooltipMessage: printLoadingMessage }),
                 children && (React.createElement(BtnWrapper, { hidden: variant === 'loading', onClick: toggleOpen }, isOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))),
                 onClose && (React.createElement(BtnWrapper, { onClick: onClose },
                     React.createElement(CloseIcon, null))),

package/dist/hooks/usePrintWhenStable.d.ts

@@ -0,0 +1,44 @@
+interface UsePrintWhenStableOptions {
+    /**
+     * Tempo em ms para considerar o DOM estável (sem mutações)
+     * @default 500
+     */
+    debounceTime?: number;
+    /**
+     * Elemento raiz para observar (se não fornecido, usa document.body)
+     */
+    rootElement?: HTMLElement | null;
+    /**
+     * Callback executado quando o DOM está estável e pronto para impressão
+     */
+    onStable?: () => void;
+    /**
+     * Callback executado ao iniciar a observação
+     */
+    onStart?: () => void;
+    /**
+     * Tempo máximo de espera em ms antes de forçar a impressão
+     * @default 10000 (10 segundos)
+     */
+    maxWaitTime?: number;
+}
+/**
+ * Hook que usa MutationObserver para detectar quando o DOM está estável
+ * e então executa a impressão. Isso garante que todos os dados foram carregados
+ * e renderizados antes de gerar o PDF.
+ */
+export declare const usePrintWhenStable: (options?: UsePrintWhenStableOptions) => {
+    /**
+     * Inicia a observação do DOM e imprime quando estável
+     */
+    printWhenStable: () => void;
+    /**
+     * Para a observação e limpa os timers
+     */
+    cancel: () => void;
+    /**
+     * Indica se está aguardando o DOM estabilizar
+     */
+    isWaiting: boolean;
+};
+export default usePrintWhenStable;

package/dist/hooks/usePrintWhenStable.js

@@ -0,0 +1,92 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Hook que usa MutationObserver para detectar quando o DOM está estável
+ * e então executa a impressão. Isso garante que todos os dados foram carregados
+ * e renderizados antes de gerar o PDF.
+ */
+export var usePrintWhenStable = function (options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.debounceTime, debounceTime = _a === void 0 ? 500 : _a, _b = options.rootElement, rootElement = _b === void 0 ? null : _b, onStable = options.onStable, onStart = options.onStart, _c = options.maxWaitTime, maxWaitTime = _c === void 0 ? 10000 : _c;
+    var observerRef = useRef(null);
+    var timeoutRef = useRef(null);
+    var maxWaitTimeoutRef = useRef(null);
+    var _d = useState(false), isWaiting = _d[0], setIsWaiting = _d[1];
+    var cleanup = useCallback(function () {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (maxWaitTimeoutRef.current) {
+            clearTimeout(maxWaitTimeoutRef.current);
+            maxWaitTimeoutRef.current = null;
+        }
+        setIsWaiting(false);
+    }, []);
+    var triggerPrint = useCallback(function () {
+        cleanup();
+        onStable === null || onStable === void 0 ? void 0 : onStable();
+        window.print();
+    }, [cleanup, onStable]);
+    var startObserving = useCallback(function () {
+        // Limpa observadores anteriores
+        cleanup();
+        // Define estado de aguardando
+        setIsWaiting(true);
+        // Callback ao iniciar
+        onStart === null || onStart === void 0 ? void 0 : onStart();
+        var targetElement = rootElement || document.body;
+        if (!targetElement) {
+            console.warn('usePrintWhenStable: No target element found');
+            triggerPrint();
+            return;
+        }
+        // Timeout máximo para forçar impressão mesmo se o DOM não estabilizar
+        maxWaitTimeoutRef.current = setTimeout(function () {
+            console.warn("usePrintWhenStable: Forced print after ".concat(maxWaitTime, "ms max wait time"));
+            triggerPrint();
+        }, maxWaitTime);
+        // Cria o MutationObserver
+        observerRef.current = new MutationObserver(function () {
+            // Reseta o timeout a cada mutação detectada
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            // Cria novo timeout que será executado se não houver mais mutações
+            timeoutRef.current = setTimeout(function () {
+                triggerPrint();
+            }, debounceTime);
+        });
+        // Configura o observer para monitorar mudanças abrangentes
+        observerRef.current.observe(targetElement, {
+            childList: true, // Detecta adição/remoção de elementos
+            subtree: true, // Observa toda a árvore de descendentes
+            attributes: true, // Detecta mudanças em atributos
+            characterData: true, // Detecta mudanças em texto
+            attributeOldValue: false,
+            characterDataOldValue: false
+        });
+        // Inicia o primeiro timeout
+        timeoutRef.current = setTimeout(function () {
+            triggerPrint();
+        }, debounceTime);
+    }, [cleanup, debounceTime, maxWaitTime, onStart, rootElement, triggerPrint]);
+    return {
+        /**
+         * Inicia a observação do DOM e imprime quando estável
+         */
+        printWhenStable: startObserving,
+        /**
+         * Para a observação e limpa os timers
+         */
+        cancel: cleanup,
+        /**
+         * Indica se está aguardando o DOM estabilizar
+         */
+        isWaiting: isWaiting
+    };
+};
+export default usePrintWhenStable;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as BankAccounts } from './components/bank-accounts/bank-account
 export { default as CCF } from './components/ccf/ccf';
 export { default as ChartSystem } from './components/chart/chartSystem';
 export { default as AddItemField } from './components/common/addItem';
+export { default as PrintButton } from './components/common/printButton';
 export { default as Tooltip } from './components/common/tooltip';
 export { default as Contacts } from './components/contacts/contacts';
 export { default as DividasPublicas } from './components/dividasPublicas/dividasPublicas';
@@ -23,3 +24,5 @@ export { default as SCR } from './components/scr/scr';
 export { default as Veiculos } from './components/veiculos/veiculos';
 export * from './components/webservice';
 export { default as ConsultaSimples } from './consultaSimples';
+export { PrintModeProvider, usePrintMode } from './contexts/printModeContext';
+export { default as usePrintWhenStable } from './hooks/usePrintWhenStable';

package/dist/index.js

@@ -3,6 +3,7 @@ export { default as BankAccounts } from './components/bank-accounts/bank-account
 export { default as CCF } from './components/ccf/ccf';
 export { default as ChartSystem } from './components/chart/chartSystem';
 export { default as AddItemField } from './components/common/addItem';
+export { default as PrintButton } from './components/common/printButton';
 export { default as Tooltip } from './components/common/tooltip';
 export { default as Contacts } from './components/contacts/contacts';
 export { default as DividasPublicas } from './components/dividasPublicas/dividasPublicas';
@@ -23,3 +24,5 @@ export { default as SCR } from './components/scr/scr';
 export { default as Veiculos } from './components/veiculos/veiculos';
 export * from './components/webservice';
 export { default as ConsultaSimples } from './consultaSimples';
+export { PrintModeProvider, usePrintMode } from './contexts/printModeContext';
+export { default as usePrintWhenStable } from './hooks/usePrintWhenStable';

package/dist/styles/globalStyle.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 // src/styles/globalStyle.tsx
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
-var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Reset + fonte padr\u00E3o para toda a aplica\u00E7\u00E3o (inclui modais e portais) */\n  *, *::before, *::after {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Open Sans Condensed', sans-serif;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  /* Oculta bot\u00F5es na impress\u00E3o */\n  @media print {\n    button,\n    [role=\"button\"],\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn {\n      display: none !important;\n    }\n  }\n\n  /* Anima\u00E7\u00F5es utilit\u00E1rias */\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n\n  @keyframes blueHighlight {\n    from {\n      background-color: rgba(0, 122, 255, 0.35);\n    }\n    to {\n      background-color: rgba(0, 122, 255, 0.15);\n    }\n  }\n\n  .blue-highlighted-process {\n    animation: blueHighlight 2.5s ease-in-out;\n    background-color: rgba(0, 122, 255, 0.15);\n    transition: background-color 0.3s ease-in-out;\n  }\n"], ["\n  /* Reset + fonte padr\u00E3o para toda a aplica\u00E7\u00E3o (inclui modais e portais) */\n  *, *::before, *::after {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Open Sans Condensed', sans-serif;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  /* Oculta bot\u00F5es na impress\u00E3o */\n  @media print {\n    button,\n    [role=\"button\"],\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn {\n      display: none !important;\n    }\n  }\n\n  /* Anima\u00E7\u00F5es utilit\u00E1rias */\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n\n  @keyframes blueHighlight {\n    from {\n      background-color: rgba(0, 122, 255, 0.35);\n    }\n    to {\n      background-color: rgba(0, 122, 255, 0.15);\n    }\n  }\n\n  .blue-highlighted-process {\n    animation: blueHighlight 2.5s ease-in-out;\n    background-color: rgba(0, 122, 255, 0.15);\n    transition: background-color 0.3s ease-in-out;\n  }\n"])));
+var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Reset + fonte padr\u00E3o para toda a aplica\u00E7\u00E3o (inclui modais e portais) */\n  *, *::before, *::after {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Open Sans Condensed', sans-serif;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  /* Oculta bot\u00F5es e tooltips na impress\u00E3o */\n  @media print {\n    button,\n    [role=\"button\"],\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn,\n    [class*=\"tooltip\"],\n    [class*=\"Tooltip\"],\n    [data-tooltip] {\n      display: none !important;\n      visibility: hidden !important;\n    }\n  }\n\n  /* Anima\u00E7\u00F5es utilit\u00E1rias */\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n\n  @keyframes blueHighlight {\n    from {\n      background-color: rgba(0, 122, 255, 0.35);\n    }\n    to {\n      background-color: rgba(0, 122, 255, 0.15);\n    }\n  }\n\n  .blue-highlighted-process {\n    animation: blueHighlight 2.5s ease-in-out;\n    background-color: rgba(0, 122, 255, 0.15);\n    transition: background-color 0.3s ease-in-out;\n  }\n"], ["\n  /* Reset + fonte padr\u00E3o para toda a aplica\u00E7\u00E3o (inclui modais e portais) */\n  *, *::before, *::after {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Open Sans Condensed', sans-serif;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  /* Oculta bot\u00F5es e tooltips na impress\u00E3o */\n  @media print {\n    button,\n    [role=\"button\"],\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn,\n    [class*=\"tooltip\"],\n    [class*=\"Tooltip\"],\n    [data-tooltip] {\n      display: none !important;\n      visibility: hidden !important;\n    }\n  }\n\n  /* Anima\u00E7\u00F5es utilit\u00E1rias */\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n\n  @keyframes blueHighlight {\n    from {\n      background-color: rgba(0, 122, 255, 0.35);\n    }\n    to {\n      background-color: rgba(0, 122, 255, 0.15);\n    }\n  }\n\n  .blue-highlighted-process {\n    animation: blueHighlight 2.5s ease-in-out;\n    background-color: rgba(0, 122, 255, 0.15);\n    transition: background-color 0.3s ease-in-out;\n  }\n"])));
 // Componente que aplica os estilos globais da aplicação.
 // A fonte "Open Sans Condensed" já é carregada via index.html.
 var GlobalStyleProvider = function () { return (React.createElement(React.Fragment, null,