lib-pixelbuild 0.2.1 → 0.2.3

package/dist/components/SliderComponent.js

@@ -1,109 +1,189 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useKeenSlider } from 'keen-slider/react.js';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
-import 'keen-slider/keen-slider.min.css';
+import { resolveResponsiveProperties, breakpointFromWidth } from '../utils/responsiveProperties.js';
 const elementFactory = new ElementFactory();
 function cleanComponentStyles(styles) {
     const exclude = new Set(['minHeight', 'display', 'alignItems', 'justifyContent', 'flexDirection']);
     return Object.fromEntries(Object.entries(styles).filter(([key]) => !exclude.has(key)));
 }
-function StaticSliderComponent({ component }) {
-    const firstSlide = orderBySort(component.elements)[0];
-    if (!firstSlide)
-        return null;
-    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: elementFactory.build(firstSlide) }));
+function buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) {
+    const isImage = element.elementType === 'image' || element.elementType === 'video';
+    if (isImage) {
+        const base = fixedHeight ? { width: '100%', height: '100%', objectFit: 'cover' } : { width: '100%' };
+        const override = useSharedImages ? sharedImageStyles || {} : element.styles;
+        return elementFactory.build(Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, base), override) }));
+    }
+    return elementFactory.build(Object.assign(Object.assign({}, element), { styles: element.styles }));
 }
-function InteractiveSliderComponent({ component }) {
+function resolveChromeColors(properties) {
+    return {
+        arrowBackground: String(properties.arrowBackground || 'rgba(0,0,0,0.45)'),
+        arrowColor: String(properties.arrowColor || '#fff'),
+        arrowSize: Number(properties.arrowSize) || 40,
+        dotActiveBackground: String(properties.dotActiveBackground || '#333'),
+        dotBackground: String(properties.dotBackground || 'rgba(0,0,0,0.15)'),
+        dotActiveColor: String(properties.dotActiveColor || '#fff'),
+        dotColor: String(properties.dotColor || '#666'),
+        dotSize: Number(properties.dotSize) || 28
+    };
+}
+const ARROW_BASE_STYLE = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 10,
+    borderRadius: '50%',
+    border: 'none',
+    fontSize: 18,
+    fontWeight: 700,
+    lineHeight: 1,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'background 0.2s'
+};
+function ArrowButton({ side, size, background, color, onClick }) {
+    return (_jsx("button", { type: "button", "aria-label": side === 'left' ? 'Slide anterior' : 'Próximo slide', onClick: onClick, style: Object.assign(Object.assign({}, ARROW_BASE_STYLE), { [side]: 8, width: size, height: size, background, color }), children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: side === 'left' ? 'M8.5 1L1.5 8L8.5 15' : 'M1.5 1L8.5 8L1.5 15', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+function Dots({ count, current, size, activeBackground, background, activeColor, color, onGoTo }) {
+    return (_jsx("div", { "aria-label": "Navega\u00E7\u00E3o do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: Array.from({ length: count }).map((_, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": current === index ? 'true' : undefined, onClick: () => onGoTo(index), style: {
+                width: size,
+                height: size,
+                borderRadius: '50%',
+                border: 'none',
+                background: current === index ? activeBackground : background,
+                color: current === index ? activeColor : color,
+                fontSize: 12,
+                fontWeight: 600,
+                lineHeight: 1,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 0.2s'
+            }, children: index + 1 }, index))) }));
+}
+function useSliderWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => setWidth(el.getBoundingClientRect().width);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+export function SliderComponent({ component, editionMode = false }) {
     const properties = component.properties || {};
     const slides = orderBySort(component.elements);
-    const [currentSlide, setCurrentSlide] = useState(0);
-    const [loaded, setLoaded] = useState(false);
-    const [ref, instanceRef] = useKeenSlider({
-        loop: slides.length > 1,
-        mode: 'snap',
-        slides: { perView: Number(properties.perView) || 1, spacing: 10 },
-        created() {
-            setLoaded(true);
-        },
-        slideChanged(slider) {
-            setCurrentSlide(slider.track.details.rel);
-        }
-    });
+    const n = slides.length;
+    const containerRef = useRef(null);
+    const width = useSliderWidth(containerRef);
+    const breakpoint = breakpointFromWidth(width);
+    const resolved = useMemo(() => resolveResponsiveProperties(properties, breakpoint), [properties, breakpoint]);
+    const perView = Math.max(1, Number(resolved.perView) || 1);
+    const spacing = Number(resolved.spacing) > 0 ? Number(resolved.spacing) : 10;
+    const fixedHeight = Number(resolved.height) > 0 ? Number(resolved.height) : 0;
+    const loop = resolved.loop === undefined ? n > 1 : Boolean(resolved.loop);
+    const slideWidth = width > 0 ? (width - spacing * (perView - 1)) / perView : 0;
+    const slideStep = slideWidth + spacing;
+    const maxIndex = Math.max(0, n - perView);
+    const [index, setIndex] = useState(loop ? n : 0);
+    const [animate, setAnimate] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const dragRef = useRef(null);
+    const currentIndex = loop ? ((Math.round(index) % n) + n) % n : Math.min(Math.max(0, Math.round(index)), maxIndex);
     useEffect(() => {
-        if (!properties.autoplay || slides.length < 2)
+        if (editionMode || !resolved.autoplay || n <= 1)
             return;
-        const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
-        const timer = window.setInterval(() => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, interval);
+        const interval = Number(resolved.interval) > 0 ? Number(resolved.interval) : 5000;
+        const timer = window.setInterval(() => {
+            setAnimate(true);
+            setIndex((prev) => prev + 1);
+        }, interval);
         return () => window.clearInterval(timer);
-    }, [instanceRef, properties.autoplay, properties.interval, slides.length]);
-    const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
-    const perView = Number(properties.perView) || 1;
-    const showArrows = Boolean(properties.showArrows) && loaded && slides.length > perView;
-    const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
-    return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: fixedHeight ? { height: fixedHeight } : undefined, children: slides.map((element) => (_jsx("div", { className: "keen-slider__slide", style: { overflow: 'hidden' }, children: elementFactory.build(Object.assign(Object.assign({}, element), { styles: element.elementType === 'image' || element.elementType === 'video'
-                            ? fixedHeight
-                                ? Object.assign({ width: '100%', height: '100%', objectFit: 'cover' }, element.styles) : Object.assign({ width: '100%' }, element.styles)
-                            : element.styles })) }, element.id))) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel - 1); }, style: {
-                            position: 'absolute',
-                            left: 8,
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                            zIndex: 10,
-                            width: 40,
-                            height: 40,
-                            borderRadius: '50%',
-                            border: 'none',
-                            background: 'rgba(0,0,0,0.45)',
-                            color: '#fff',
-                            fontSize: 18,
-                            fontWeight: 700,
-                            lineHeight: 1,
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: 'background 0.2s'
-                        }, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M8.5 1L1.5 8L8.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, style: {
-                            position: 'absolute',
-                            right: 8,
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                            zIndex: 10,
-                            width: 40,
-                            height: 40,
-                            borderRadius: '50%',
-                            border: 'none',
-                            background: 'rgba(0,0,0,0.45)',
-                            color: '#fff',
-                            fontSize: 18,
-                            fontWeight: 700,
-                            lineHeight: 1,
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: 'background 0.2s'
-                        }, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(index); }, style: {
-                        width: 28,
-                        height: 28,
-                        borderRadius: '50%',
-                        border: 'none',
-                        background: currentSlide === index ? '#333' : 'rgba(0,0,0,0.15)',
-                        color: currentSlide === index ? '#fff' : '#666',
-                        fontSize: 12,
-                        fontWeight: 600,
-                        lineHeight: 1,
-                        cursor: 'pointer',
+    }, [editionMode, resolved.autoplay, resolved.interval, n]);
+    const snapToRange = (value) => {
+        if (!loop)
+            return value;
+        if (value >= 2 * n)
+            return value - n;
+        if (value < n)
+            return value + n;
+        return value;
+    };
+    const handleTransitionEnd = () => {
+        if (!loop || dragging)
+            return;
+        const snapped = snapToRange(index);
+        if (snapped !== index) {
+            setAnimate(false);
+            setIndex(snapped);
+        }
+    };
+    const goTo = (i) => {
+        const target = loop ? i : Math.min(Math.max(0, i), maxIndex);
+        setAnimate(true);
+        setIndex(target);
+    };
+    const goToDot = (i) => {
+        const target = loop ? n + i : Math.min(Math.max(0, i), maxIndex);
+        let delta = target - index;
+        if (loop) {
+            if (delta > n / 2)
+                delta -= n;
+            else if (delta < -n / 2)
+                delta += n;
+        }
+        setAnimate(true);
+        setIndex(index + delta);
+    };
+    const onPointerDown = (e) => {
+        if (n <= 1)
+            return;
+        dragRef.current = { startX: e.clientX, startIndex: index };
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(true);
+        setAnimate(false);
+    };
+    const onPointerMove = (e) => {
+        const drag = dragRef.current;
+        if (!drag || slideStep <= 0)
+            return;
+        setIndex(drag.startIndex - (e.clientX - drag.startX) / slideStep);
+    };
+    const endDrag = () => {
+        if (!dragRef.current)
+            return;
+        dragRef.current = null;
+        setDragging(false);
+        setIndex((prev) => {
+            const rounded = Math.round(prev);
+            return loop ? snapToRange(rounded) : Math.min(Math.max(0, rounded), maxIndex);
+        });
+        setAnimate(true);
+    };
+    const translateX = -(index * slideStep);
+    const trackSlides = loop ? [...slides, ...slides, ...slides] : slides;
+    const showArrows = Boolean(resolved.showArrows) && n > perView;
+    const showDots = Boolean(resolved.showDots) && n > 1;
+    const chrome = resolveChromeColors(resolved);
+    const useSharedImages = resolved.imageCustomization !== 'separate';
+    const sharedImageStyles = resolved.imageStyles || {};
+    return (_jsxs("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { style: Object.assign({ overflow: 'hidden' }, (fixedHeight ? { height: fixedHeight } : {})), children: _jsx("div", { style: {
                         display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        transition: 'all 0.2s'
-                    }, children: index + 1 }, element.id))) }))] }));
-}
-export function SliderComponent({ component, editionMode = false }) {
-    if (editionMode)
-        return _jsx(StaticSliderComponent, { component: component });
-    return _jsx(InteractiveSliderComponent, { component: component });
+                        columnGap: spacing,
+                        transform: `translateX(${translateX}px)`,
+                        transition: animate && !dragging ? 'transform 0.3s ease' : 'none',
+                        cursor: dragging ? 'grabbing' : n > 1 ? 'grab' : 'default',
+                        touchAction: 'pan-y',
+                        userSelect: 'none'
+                    }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onTransitionEnd: handleTransitionEnd, children: trackSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, { side: "left", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index - 1) }), _jsx(ArrowButton, { side: "right", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index + 1) })] })), showDots && (_jsx(Dots, { count: n, current: currentIndex, size: chrome.dotSize, activeBackground: chrome.dotActiveBackground, background: chrome.dotBackground, activeColor: chrome.dotActiveColor, color: chrome.dotColor, onGoTo: goToDot }))] }));
 }

package/dist/components/SocialIconsComponent.d.ts

@@ -1,4 +1,5 @@
 import type { SocialPropertiesType } from '../types/SocialPropertiesType.js';
-export declare function SocialIconsComponent({ social }: {
-    readonly social: SocialPropertiesType;
+export declare function SocialIconsComponent({ social, color }: {
+    readonly social?: SocialPropertiesType;
+    readonly color?: string;
 }): import("react").JSX.Element;

package/dist/components/SocialIconsComponent.js

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Row, Col } from 'react-bootstrap';
-import { FaFacebookF, FaInstagram, FaLink } from 'react-icons/fa';
-export function SocialIconsComponent({ social }) {
-    var _a, _b, _c;
-    const all = [];
-    if ((_a = social.facebook) === null || _a === void 0 ? void 0 : _a.path) {
-        all.push({ id: 'facebook', url: social.facebook.path, icon: FaFacebookF, description: 'Logo do Facebook' });
-    }
-    if ((_b = social.instagram) === null || _b === void 0 ? void 0 : _b.path) {
-        all.push({ id: 'instagram', url: social.instagram.path, icon: FaInstagram, description: 'Logo do Instagram' });
-    }
-    if ((_c = social.linktree) === null || _c === void 0 ? void 0 : _c.path) {
-        all.push({ id: 'linktree', url: social.linktree.path, icon: FaLink, description: 'Logo do Linktree' });
-    }
-    if (all.length === 0)
+import { FaFacebookF, FaInstagram, FaTiktok, FaWhatsapp, FaYoutube, FaXTwitter, FaLinkedin, FaThreads, FaLink } from 'react-icons/fa6';
+const SOCIAL_ICONS = {
+    facebook: FaFacebookF,
+    instagram: FaInstagram,
+    tiktok: FaTiktok,
+    whatsapp: FaWhatsapp,
+    youtube: FaYoutube,
+    x: FaXTwitter,
+    twitter: FaXTwitter,
+    linkedin: FaLinkedin,
+    threads: FaThreads,
+    linktree: FaLink,
+    kwai: FaLink
+};
+export function SocialIconsComponent({ social, color }) {
+    const entries = Object.entries(social || {})
+        .filter(([, value]) => Boolean(value === null || value === void 0 ? void 0 : value.path))
+        .map(([id, value]) => ({ id, url: (value === null || value === void 0 ? void 0 : value.path) || '', Icon: SOCIAL_ICONS[id] || FaLink }));
+    if (entries.length === 0)
         return null;
-    return (_jsx(Row, { children: all.map((element) => (_jsx(Col, { className: "text-center social-icons", style: { color: '#FFCC00' }, children: _jsx("a", { href: element.url, target: "_blank", rel: "noopener noreferrer", "aria-label": element.description, children: _jsx(element.icon, {}) }) }, element.id))) }));
+    return (_jsx("div", { className: "pb-social-icons", style: { color }, children: entries.map(({ id, url, Icon }) => (_jsx("a", { className: "pb-social-icon", href: url, target: "_blank", rel: "noopener noreferrer", "aria-label": id, children: _jsx(Icon, {}) }, id))) }));
 }

package/dist/components/TextComponent.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Row, Container } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
+import { resolveImageElement } from '../utils/imageCustomization.js';
 const elementFactory = new ElementFactory();
 const TextComponent = memo(function TextComponent({ component }) {
-    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+    const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { TextComponent };

package/dist/constants/ComponentEnum.d.ts

@@ -13,5 +13,7 @@ export declare const ComponentTypeEnum: {
     readonly SocialIcons: "social-icons";
     readonly Map: "map";
     readonly List: "list";
+    readonly Buttons: "buttons";
+    readonly Icon: "icon";
 };
 export type ComponentTypeSlug = (typeof ComponentTypeEnum)[keyof typeof ComponentTypeEnum];

package/dist/constants/ComponentEnum.js

@@ -13,4 +13,6 @@ export const ComponentTypeEnum = {
     SocialIcons: 'social-icons',
     Map: 'map',
     List: 'list',
+    Buttons: 'buttons',
+    Icon: 'icon'
 };

package/dist/designSystem/baseCss.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CSS base do site público (sem Bootstrap).
+ *
+ * Classes utilitárias e de componentes usadas pelo `lib-pixelbuild`. Todos os
+ * valores de destaque usam `var(--pb-*)` com fallback, então o design system
+ * (Etapa 1) sobrescreve os tokens sem tocar nestes estilos.
+ */
+export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n  box-sizing: border-box;\n}\n.pb-root {\n  margin: 0;\n  font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n  font-size: var(--pb-font-size-base, 16px);\n  line-height: var(--pb-line-height, 1.6);\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-background, #ffffff);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n  margin: 0 0 0.5em;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--pb-color-heading, #111827);\n}\n.pb-root img {\n  max-width: 100%;\n  height: auto;\n}\n.pb-root a {\n  color: var(--pb-color-primary, #f58220);\n  text-decoration: none;\n}\n.pb-root a:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n  max-width: none !important;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n  .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n  .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n  .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n  .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n  .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--pb-gutter, 1.5rem);\n}\n.pb-col {\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--pb-radius-md, 8px);\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.pb-button-primary {\n  background-color: var(--pb-color-primary, #f58220);\n  border-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n  background-color: var(--pb-color-secondary, #64748b);\n  border-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-success {\n  background-color: var(--pb-color-success, #16a34a);\n  border-color: var(--pb-color-success, #16a34a);\n  color: #ffffff;\n}\n.pb-button-danger {\n  background-color: var(--pb-color-danger, #dc2626);\n  border-color: var(--pb-color-danger, #dc2626);\n  color: #ffffff;\n}\n.pb-button-warning {\n  background-color: var(--pb-color-warning, #f59e0b);\n  border-color: var(--pb-color-warning, #f59e0b);\n  color: #1f2937;\n}\n.pb-button-info {\n  background-color: var(--pb-color-info, #0ea5e9);\n  border-color: var(--pb-color-info, #0ea5e9);\n  color: #ffffff;\n}\n.pb-button-light {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n  background-color: var(--pb-color-dark, #0f172a);\n  border-color: var(--pb-color-dark, #0f172a);\n  color: #ffffff;\n}\n.pb-button-outline-primary {\n  background-color: transparent;\n  border-color: var(--pb-color-primary, #f58220);\n  color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n  background-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-outline-secondary {\n  background-color: transparent;\n  border-color: var(--pb-color-secondary, #64748b);\n  color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n  background-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-link {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--pb-color-primary, #f58220);\n  padding-inline: 0.5em;\n}\n.pb-button-sm {\n  padding: 0.375em 0.875em;\n  font-size: 0.875rem;\n  border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n  padding: 0.625em 1.5em;\n  font-size: 1.125rem;\n  border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 0.2em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: pb-spin 0.75s linear infinite;\n  vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n  width: 1rem;\n  height: 1rem;\n  border-width: 0.18em;\n}\n@keyframes pb-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n  padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n  border: 1px solid;\n  border-radius: var(--pb-radius-md, 8px);\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n  font-weight: var(--pb-font-weight-bold, 700);\n  margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n  background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n  background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n  background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n  background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n  display: block;\n  width: 100%;\n  padding: 0.5em 0.75em;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-surface, #ffffff);\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n  outline: none;\n  border-color: var(--pb-color-primary, #f58220);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n  border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n  display: block;\n  margin-top: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n  width: 1.1em;\n  height: 1.1em;\n  accent-color: var(--pb-color-primary, #f58220);\n  flex-shrink: 0;\n}\n.pb-form-check-label {\n  font-weight: normal;\n  margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n  width: 100%;\n}\n.pb-header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pb-space-md, 16px);\n  flex-wrap: wrap;\n  padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n.pb-brand img {\n  max-height: 56px;\n  width: auto;\n}\n.pb-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pb-nav-link {\n  display: inline-block;\n  padding: 0.5rem 0.75rem;\n  color: inherit;\n  text-decoration: none;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n  text-decoration: none;\n  opacity: 0.85;\n}\n.pb-nav-link-active {\n  border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n  display: none;\n  padding: 0.375rem 0.625rem;\n  font-size: 1.25rem;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  cursor: pointer;\n  color: inherit;\n}\n@media (max-width: 991.98px) {\n  .pb-nav-toggle { display: inline-flex; align-items: center; }\n  .pb-nav { display: none; }\n  .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n  width: 100%;\n  padding-block: var(--pb-space-xl, 32px);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n  border: none;\n  border-top: 1px solid var(--pb-color-border, #e5e7eb);\n  margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  flex-wrap: wrap;\n}\n.pb-social-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n}\n.pb-social-icon:hover {\n  text-decoration: none;\n  opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";