@sbkbs/ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +115 -115
- package/dist/oficios-ui.css +1 -0
- package/dist/oficios-ui.umd.cjs +1 -1
- package/dist/oficios-ui.umd.cjs.map +1 -1
- package/dist/utils/cn.js +2 -2
- package/package.json +17 -15
- package/dist/node_modules/clsx/dist/clsx.js +0 -17
- package/dist/node_modules/clsx/dist/clsx.js.map +0 -1
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +0 -2925
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js.map +0 -1
- package/dist/ui.css +0 -1
package/README.md
CHANGED
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
# @sbkbs/ui
|
|
2
|
-
|
|
3
|
-
Biblioteca de componentes UI e tema global para manter o mesmo padrão visual entre projetos SBK BS.
|
|
4
|
-
|
|
5
|
-
## Conteúdo
|
|
6
|
-
|
|
7
|
-
- **Tema**: variáveis CSS (Material Design 3) light/dark + **Guia de marca SBK** (cores e tipografia Jakarta) em `theme/theme.css` + `ThemeProvider` React.
|
|
8
|
-
- **Componentes**: `Button`, `Card`, `Input`, `Modal`, `Title`, `Subtitle`, `Paragraph`, `Header`, `Footer`.
|
|
9
|
-
- **Paletas de botão**: escolha a cor do botão primary via prop `palette` ou `data-button-palette` no pai (`verde-vibrante`, `grafite-azulado`, etc.).
|
|
10
|
-
|
|
11
|
-
## Uso em outro projeto
|
|
12
|
-
|
|
13
|
-
### 1. Instalar no monorepo
|
|
14
|
-
|
|
15
|
-
No `package.json` do app (ex.: frontend), adicione:
|
|
16
|
-
|
|
17
|
-
```json
|
|
18
|
-
"dependencies": {
|
|
19
|
-
"@sbkbs/ui": "^1.0.2"
|
|
20
|
-
}
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Rode `npm install` na raiz do monorepo.
|
|
24
|
-
|
|
25
|
-
### 2. Tema (variáveis CSS)
|
|
26
|
-
|
|
27
|
-
Os componentes usam variáveis CSS (`--md-surface`, `--primary-color`, etc.). O consumidor pode:
|
|
28
|
-
|
|
29
|
-
- Usar o tema da lib: `import '@sbkbs/ui/theme.css';` no entry (ex.: `main.tsx`), ou
|
|
30
|
-
- Definir as mesmas variáveis no próprio CSS do projeto (o frontend OFICIO.IA já tem `theme.css` próprio).
|
|
31
|
-
|
|
32
|
-
### 3. ThemeProvider (opcional)
|
|
33
|
-
|
|
34
|
-
Para light/dark com toggle e persistência em `localStorage`:
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
import { ThemeProvider } from '@sbkbs/ui';
|
|
38
|
-
|
|
39
|
-
root.render(
|
|
40
|
-
<ThemeProvider defaultTheme="light">
|
|
41
|
-
<App />
|
|
42
|
-
</ThemeProvider>
|
|
43
|
-
);
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### 4. Componentes
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import { Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer } from '@sbkbs/ui';
|
|
50
|
-
|
|
51
|
-
<Button variant="primary" size="md" palette="verde-vibrante">Salvar</Button>
|
|
52
|
-
<Card variant="elevated" padding="lg" hoverable>...</Card>
|
|
53
|
-
<Input label="E-mail" size="md" />
|
|
54
|
-
<Modal isOpen={open} onClose={() => setOpen(false)} title="Título">...</Modal>
|
|
55
|
-
<Title size="2xl" weight="bold">Título</Title>
|
|
56
|
-
<Subtitle size="md" muted>Subtítulo</Subtitle>
|
|
57
|
-
<Paragraph size="md">Texto.</Paragraph>
|
|
58
|
-
|
|
59
|
-
<Header
|
|
60
|
-
logoSrc="/logo.png"
|
|
61
|
-
logoDarkSrc="/logo-dark.png"
|
|
62
|
-
title="OFÍCIO.IA"
|
|
63
|
-
subtitle="Subtítulo"
|
|
64
|
-
onLogoClick={() => navigate('/home')}
|
|
65
|
-
rightContent={<>
|
|
66
|
-
<LanguageSelector />
|
|
67
|
-
<ThemeToggle />
|
|
68
|
-
<UserMenu />
|
|
69
|
-
</>}
|
|
70
|
-
/>
|
|
71
|
-
<Footer poweredByText="Powered by" logoSrc="/logo.png" logoFallbackText="SBK" />
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Guia de marca (tema)
|
|
75
|
-
|
|
76
|
-
Cores disponíveis como variáveis CSS: `--brand-verde-vibrante`, `--brand-grafite-azulado`, `--brand-verde-profundo`, `--brand-azul-acinzentado`, `--brand-cinza-medio`, `--brand-cinza-escuro`, `--brand-off-white`, e paleta "O Criador" (`--brand-azul-intenso`, `--brand-verde-lima`, etc.). Tipografia: `--font-primary` / `--font-heading` = Plus Jakarta Sans (Google Fonts).
|
|
77
|
-
|
|
78
|
-
Paletas de botão (prop `palette` ou `data-button-palette` no pai): `verde-vibrante` | `verde-profundo` | `grafite-azulado` | `azul-acinzentado` | `cinza-medio` | `cinza-escuro` | `off-white`.
|
|
79
|
-
|
|
80
|
-
## Compartilhar com outro projeto
|
|
81
|
-
|
|
82
|
-
- **Mesmo monorepo:** adicione o app em `workspaces` e use `"@sbkbs/ui": "*"` nas dependências; depois `npm install` na raiz.
|
|
83
|
-
- **Outro repositório:** use dependência por Git (`"@sbkbs/ui": "git+https://..."`) ou publique em um registry npm e instale com `npm install @sbkbs/ui`.
|
|
84
|
-
|
|
85
|
-
Guia completo: [docs/COMPARTILHAR_LIB_UI.md](../docs/COMPARTILHAR_LIB_UI.md).
|
|
86
|
-
|
|
87
|
-
## Desenvolvimento
|
|
88
|
-
|
|
89
|
-
- **Build**: `npm run build` dentro de `ui`.
|
|
90
|
-
- **Watch**: `npm run dev` dentro de `ui`.
|
|
91
|
-
- **Playground**: `npm run playground`
|
|
92
|
-
- **Storybook**: `npm run storybook`
|
|
93
|
-
- **Testes**: `npm run test`
|
|
94
|
-
|
|
95
|
-
## Estrutura
|
|
96
|
-
|
|
97
|
-
```
|
|
98
|
-
ui/
|
|
99
|
-
src/
|
|
100
|
-
index.ts
|
|
101
|
-
theme/
|
|
102
|
-
theme.css
|
|
103
|
-
ThemeProvider.tsx
|
|
104
|
-
components/
|
|
105
|
-
Button/
|
|
106
|
-
Card/
|
|
107
|
-
Input/
|
|
108
|
-
Modal/
|
|
109
|
-
Title/
|
|
110
|
-
Subtitle/
|
|
111
|
-
Paragraph/
|
|
112
|
-
Header/
|
|
113
|
-
Footer/
|
|
114
|
-
dist/
|
|
115
|
-
```
|
|
1
|
+
# @sbkbs/ui
|
|
2
|
+
|
|
3
|
+
Biblioteca de componentes UI e tema global para manter o mesmo padrão visual entre projetos SBK BS.
|
|
4
|
+
|
|
5
|
+
## Conteúdo
|
|
6
|
+
|
|
7
|
+
- **Tema**: variáveis CSS (Material Design 3) light/dark + **Guia de marca SBK** (cores e tipografia Jakarta) em `theme/theme.css` + `ThemeProvider` React.
|
|
8
|
+
- **Componentes**: `Button`, `Card`, `Input`, `Modal`, `Title`, `Subtitle`, `Paragraph`, `Header`, `Footer`.
|
|
9
|
+
- **Paletas de botão**: escolha a cor do botão primary via prop `palette` ou `data-button-palette` no pai (`verde-vibrante`, `grafite-azulado`, etc.).
|
|
10
|
+
|
|
11
|
+
## Uso em outro projeto
|
|
12
|
+
|
|
13
|
+
### 1. Instalar no monorepo
|
|
14
|
+
|
|
15
|
+
No `package.json` do app (ex.: frontend), adicione:
|
|
16
|
+
|
|
17
|
+
```json
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@sbkbs/ui": "^1.0.2"
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Rode `npm install` na raiz do monorepo.
|
|
24
|
+
|
|
25
|
+
### 2. Tema (variáveis CSS)
|
|
26
|
+
|
|
27
|
+
Os componentes usam variáveis CSS (`--md-surface`, `--primary-color`, etc.). O consumidor pode:
|
|
28
|
+
|
|
29
|
+
- Usar o tema da lib: `import '@sbkbs/ui/theme.css';` no entry (ex.: `main.tsx`), ou
|
|
30
|
+
- Definir as mesmas variáveis no próprio CSS do projeto (o frontend OFICIO.IA já tem `theme.css` próprio).
|
|
31
|
+
|
|
32
|
+
### 3. ThemeProvider (opcional)
|
|
33
|
+
|
|
34
|
+
Para light/dark com toggle e persistência em `localStorage`:
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { ThemeProvider } from '@sbkbs/ui';
|
|
38
|
+
|
|
39
|
+
root.render(
|
|
40
|
+
<ThemeProvider defaultTheme="light">
|
|
41
|
+
<App />
|
|
42
|
+
</ThemeProvider>
|
|
43
|
+
);
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 4. Componentes
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer } from '@sbkbs/ui';
|
|
50
|
+
|
|
51
|
+
<Button variant="primary" size="md" palette="verde-vibrante">Salvar</Button>
|
|
52
|
+
<Card variant="elevated" padding="lg" hoverable>...</Card>
|
|
53
|
+
<Input label="E-mail" size="md" />
|
|
54
|
+
<Modal isOpen={open} onClose={() => setOpen(false)} title="Título">...</Modal>
|
|
55
|
+
<Title size="2xl" weight="bold">Título</Title>
|
|
56
|
+
<Subtitle size="md" muted>Subtítulo</Subtitle>
|
|
57
|
+
<Paragraph size="md">Texto.</Paragraph>
|
|
58
|
+
|
|
59
|
+
<Header
|
|
60
|
+
logoSrc="/logo.png"
|
|
61
|
+
logoDarkSrc="/logo-dark.png"
|
|
62
|
+
title="OFÍCIO.IA"
|
|
63
|
+
subtitle="Subtítulo"
|
|
64
|
+
onLogoClick={() => navigate('/home')}
|
|
65
|
+
rightContent={<>
|
|
66
|
+
<LanguageSelector />
|
|
67
|
+
<ThemeToggle />
|
|
68
|
+
<UserMenu />
|
|
69
|
+
</>}
|
|
70
|
+
/>
|
|
71
|
+
<Footer poweredByText="Powered by" logoSrc="/logo.png" logoFallbackText="SBK" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Guia de marca (tema)
|
|
75
|
+
|
|
76
|
+
Cores disponíveis como variáveis CSS: `--brand-verde-vibrante`, `--brand-grafite-azulado`, `--brand-verde-profundo`, `--brand-azul-acinzentado`, `--brand-cinza-medio`, `--brand-cinza-escuro`, `--brand-off-white`, e paleta "O Criador" (`--brand-azul-intenso`, `--brand-verde-lima`, etc.). Tipografia: `--font-primary` / `--font-heading` = Plus Jakarta Sans (Google Fonts).
|
|
77
|
+
|
|
78
|
+
Paletas de botão (prop `palette` ou `data-button-palette` no pai): `verde-vibrante` | `verde-profundo` | `grafite-azulado` | `azul-acinzentado` | `cinza-medio` | `cinza-escuro` | `off-white`.
|
|
79
|
+
|
|
80
|
+
## Compartilhar com outro projeto
|
|
81
|
+
|
|
82
|
+
- **Mesmo monorepo:** adicione o app em `workspaces` e use `"@sbkbs/ui": "*"` nas dependências; depois `npm install` na raiz.
|
|
83
|
+
- **Outro repositório:** use dependência por Git (`"@sbkbs/ui": "git+https://..."`) ou publique em um registry npm e instale com `npm install @sbkbs/ui`.
|
|
84
|
+
|
|
85
|
+
Guia completo: [docs/COMPARTILHAR_LIB_UI.md](../docs/COMPARTILHAR_LIB_UI.md).
|
|
86
|
+
|
|
87
|
+
## Desenvolvimento
|
|
88
|
+
|
|
89
|
+
- **Build**: `npm run build` dentro de `ui`.
|
|
90
|
+
- **Watch**: `npm run dev` dentro de `ui`.
|
|
91
|
+
- **Playground**: `npm run playground`
|
|
92
|
+
- **Storybook**: `npm run storybook`
|
|
93
|
+
- **Testes**: `npm run test`
|
|
94
|
+
|
|
95
|
+
## Estrutura
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
ui/
|
|
99
|
+
src/
|
|
100
|
+
index.ts
|
|
101
|
+
theme/
|
|
102
|
+
theme.css
|
|
103
|
+
ThemeProvider.tsx
|
|
104
|
+
components/
|
|
105
|
+
Button/
|
|
106
|
+
Card/
|
|
107
|
+
Input/
|
|
108
|
+
Modal/
|
|
109
|
+
Title/
|
|
110
|
+
Subtitle/
|
|
111
|
+
Paragraph/
|
|
112
|
+
Header/
|
|
113
|
+
Footer/
|
|
114
|
+
dist/
|
|
115
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap";@import"https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap";/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-blue-500:oklch(62.3% .214 259.815);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-wide:.025em;--leading-tight:1.25;--leading-relaxed:1.625;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-primary:var(--font-primary);--font-logo:var(--font-logo)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-full{top:100%}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-\[var\(--spacing-md\)\]{right:var(--spacing-md)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-full{bottom:100%}.left-1\/2{left:50%}.left-\[var\(--spacing-md\)\]{left:var(--spacing-md)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\[1\]{z-index:1}.z-\[1000\]{z-index:1000}.z-\[1200\]{z-index:1200}.z-\[var\(--z-index-dropdown\)\]{z-index:var(--z-index-dropdown)}.z-\[var\(--z-index-modal\)\]{z-index:var(--z-index-modal)}.z-\[var\(--z-index-modal-backdrop\)\]{z-index:var(--z-index-modal-backdrop)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing) * 1)}.mt-0{margin-top:calc(var(--spacing) * 0)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-\[var\(--spacing-xs\)\]{margin-top:var(--spacing-xs)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-\[var\(--spacing-xs\)\]{margin-bottom:var(--spacing-xs)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-\[1\.0625rem\]{margin-left:1.0625rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-0\.5{height:calc(var(--spacing) * .5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-\[1\.125rem\]{height:1.125rem}.h-\[1em\]{height:1em}.h-full{height:100%}.h-px{height:1px}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-\[90vh\]{max-height:90vh}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-9{min-height:calc(var(--spacing) * 9)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-14{min-height:calc(var(--spacing) * 14)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[1\.75rem\]{min-height:1.75rem}.min-h-\[2\.375rem\]{min-height:2.375rem}.min-h-\[2\.625rem\]{min-height:2.625rem}.min-h-\[100dvh\]{min-height:100dvh}.w-0\.5{width:calc(var(--spacing) * .5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-11{width:calc(var(--spacing) * 11)}.w-16{width:calc(var(--spacing) * 16)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-96{width:calc(var(--spacing) * 96)}.w-\[1\.125rem\]{width:1.125rem}.w-\[1em\]{width:1em}.w-\[22rem\]{width:22rem}.w-\[42rem\]{width:42rem}.w-\[600px\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\[25rem\]{max-width:25rem}.max-w-\[30rem\]{max-width:30rem}.max-w-\[31\.25rem\]{max-width:31.25rem}.max-w-\[43\.75rem\]{max-width:43.75rem}.max-w-\[56\.25rem\]{max-width:56.25rem}.max-w-\[90vw\]{max-width:90vw}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-9{min-width:calc(var(--spacing) * 9)}.min-w-11{min-width:calc(var(--spacing) * 11)}.min-w-12{min-width:calc(var(--spacing) * 12)}.min-w-14{min-width:calc(var(--spacing) * 14)}.min-w-\[1\.75rem\]{min-width:1.75rem}.min-w-\[2\.375rem\]{min-width:2.375rem}.min-w-\[2\.625rem\]{min-width:2.625rem}.min-w-\[34rem\]{min-width:34rem}.min-w-\[36rem\]{min-width:36rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-5{--tw-translate-x:calc(var(--spacing) * 5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-items-center{justify-items:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-\[0\.3125rem\]{gap:.3125rem}.gap-\[0\.4375rem\]{gap:.4375rem}.gap-\[0\.5625rem\]{gap:.5625rem}.gap-\[var\(--spacing-lg\)\]{gap:var(--spacing-lg)}.gap-\[var\(--spacing-md\)\]{gap:var(--spacing-md)}.gap-\[var\(--spacing-xs\)\]{gap:var(--spacing-xs)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[var\(--border-radius-2xl\)\]{border-radius:var(--border-radius-2xl)}.rounded-\[var\(--border-radius-lg\)\]{border-radius:var(--border-radius-lg)}.rounded-\[var\(--border-radius-md\)\]{border-radius:var(--border-radius-md)}.rounded-\[var\(--border-radius-sm\)\]{border-radius:var(--border-radius-sm)}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--border-color\)\]{border-color:var(--border-color)}.border-\[var\(--info-color\)\]\/40{border-color:var(--info-color)}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--info-color\)\]\/40{border-color:color-mix(in oklab,var(--info-color) 40%,transparent)}}.border-\[var\(--md-error\)\],.border-\[var\(--md-error\)\]\/40{border-color:var(--md-error)}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--md-error\)\]\/40{border-color:color-mix(in oklab,var(--md-error) 40%,transparent)}}.border-\[var\(--md-outline\)\]{border-color:var(--md-outline)}.border-\[var\(--md-outline-variant\)\]{border-color:var(--md-outline-variant)}.border-\[var\(--md-primary\)\]{border-color:var(--md-primary)}.border-\[var\(--success-color\)\]\/40{border-color:var(--success-color)}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--success-color\)\]\/40{border-color:color-mix(in oklab,var(--success-color) 40%,transparent)}}.border-\[var\(--warning-color\)\]\/40{border-color:var(--warning-color)}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--warning-color\)\]\/40{border-color:color-mix(in oklab,var(--warning-color) 40%,transparent)}}.border-transparent{border-color:#0000}.bg-\[color\:color-mix\(in_srgb\,var\(--md-primary\)_16\%\,transparent\)\]{background-color:var(--md-primary)}@supports (color:color-mix(in lab,red,red)){.bg-\[color\:color-mix\(in_srgb\,var\(--md-primary\)_16\%\,transparent\)\]{background-color:color-mix(in srgb,var(--md-primary) 16%,transparent)}}.bg-\[var\(--bg-secondary\)\]{background-color:var(--bg-secondary)}.bg-\[var\(--bg-tertiary\)\]{background-color:var(--bg-tertiary)}.bg-\[var\(--border-color\)\]{background-color:var(--border-color)}.bg-\[var\(--brand-cinza-escuro\)\]{background-color:var(--brand-cinza-escuro)}.bg-\[var\(--info-color\)\],.bg-\[var\(--info-color\)\]\/10{background-color:var(--info-color)}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--info-color\)\]\/10{background-color:color-mix(in oklab,var(--info-color) 10%,transparent)}}.bg-\[var\(--md-error\)\],.bg-\[var\(--md-error\)\]\/10{background-color:var(--md-error)}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--md-error\)\]\/10{background-color:color-mix(in oklab,var(--md-error) 10%,transparent)}}.bg-\[var\(--md-outline-variant\)\]{background-color:var(--md-outline-variant)}.bg-\[var\(--md-primary\)\]{background-color:var(--md-primary)}.bg-\[var\(--md-primary-container\)\]{background-color:var(--md-primary-container)}.bg-\[var\(--md-secondary\)\]{background-color:var(--md-secondary)}.bg-\[var\(--md-surface\)\]{background-color:var(--md-surface)}.bg-\[var\(--md-surface-container-high\)\]{background-color:var(--md-surface-container-high)}.bg-\[var\(--neutral-color\)\]{background-color:var(--neutral-color)}.bg-\[var\(--success-color\)\],.bg-\[var\(--success-color\)\]\/10{background-color:var(--success-color)}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--success-color\)\]\/10{background-color:color-mix(in oklab,var(--success-color) 10%,transparent)}}.bg-\[var\(--warning-color\)\],.bg-\[var\(--warning-color\)\]\/10{background-color:var(--warning-color)}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--warning-color\)\]\/10{background-color:color-mix(in oklab,var(--warning-color) 10%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-transparent{background-color:#0000}.bg-\[linear-gradient\(135deg\,var\(--text-primary\)_0\%\,var\(--primary-color\)_50\%\,var\(--secondary-color\)_100\%\)\]{background-image:linear-gradient(135deg,var(--text-primary) 0%,var(--primary-color) 50%,var(--secondary-color) 100%)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-\[var\(--spacing-2xl\)\]{padding:var(--spacing-2xl)}.p-\[var\(--spacing-lg\)\]{padding:var(--spacing-lg)}.p-\[var\(--spacing-md\)\]{padding:var(--spacing-md)}.p-\[var\(--spacing-xl\)\]{padding:var(--spacing-xl)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-\[var\(--spacing-2xl\)\]{padding-inline:var(--spacing-2xl)}.px-\[var\(--spacing-lg\)\]{padding-inline:var(--spacing-lg)}.px-\[var\(--spacing-md\)\]{padding-inline:var(--spacing-md)}.px-\[var\(--spacing-xl\)\]{padding-inline:var(--spacing-xl)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-\[0\.5625rem\]{padding-block:.5625rem}.py-\[var\(--spacing-lg\)\]{padding-block:var(--spacing-lg)}.py-\[var\(--spacing-md\)\]{padding-block:var(--spacing-md)}.py-\[var\(--spacing-sm\)\]{padding-block:var(--spacing-sm)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-10{padding-left:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-justify{text-align:justify}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.95rem\]{font-size:.95rem}.text-\[0\.6875rem\]{font-size:.6875rem}.text-\[0\.8125rem\]{font-size:.8125rem}.text-\[1\.375rem\]{font-size:1.375rem}.text-\[3rem\]{font-size:3rem}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[var\(--line-height-loose\)\]{--tw-leading:var(--line-height-loose);line-height:var(--line-height-loose)}.leading-\[var\(--line-height-normal\)\]{--tw-leading:var(--line-height-normal);line-height:var(--line-height-normal)}.leading-\[var\(--line-height-relaxed\)\]{--tw-leading:var(--line-height-relaxed);line-height:var(--line-height-relaxed)}.leading-\[var\(--line-height-tight\)\]{--tw-leading:var(--line-height-tight);line-height:var(--line-height-tight)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-\[var\(--font-weight-bold\)\]{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-\[var\(--font-weight-light\)\]{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-\[var\(--font-weight-medium\)\]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-\[var\(--font-weight-normal\)\]{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-\[var\(--font-weight-semibold\)\]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.01em\]{--tw-tracking:.01em;letter-spacing:.01em}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.05em\]{--tw-tracking:.05em;letter-spacing:.05em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--font-size-2xl\)\]{color:var(--font-size-2xl)}.text-\[var\(--font-size-3xl\)\]{color:var(--font-size-3xl)}.text-\[var\(--font-size-4xl\)\]{color:var(--font-size-4xl)}.text-\[var\(--font-size-base\)\]{color:var(--font-size-base)}.text-\[var\(--font-size-lg\)\]{color:var(--font-size-lg)}.text-\[var\(--font-size-sm\)\]{color:var(--font-size-sm)}.text-\[var\(--font-size-xl\)\]{color:var(--font-size-xl)}.text-\[var\(--font-size-xs\)\]{color:var(--font-size-xs)}.text-\[var\(--md-error\)\]{color:var(--md-error)}.text-\[var\(--md-on-error\)\]{color:var(--md-on-error)}.text-\[var\(--md-on-primary\)\]{color:var(--md-on-primary)}.text-\[var\(--md-on-secondary\)\]{color:var(--md-on-secondary)}.text-\[var\(--md-on-surface\)\]{color:var(--md-on-surface)}.text-\[var\(--md-on-surface-variant\)\]{color:var(--md-on-surface-variant)}.text-\[var\(--md-primary\)\]{color:var(--md-primary)}.text-\[var\(--text-muted\)\]{color:var(--text-muted)}.text-\[var\(--text-primary\)\]{color:var(--text-primary)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--shadow-2xl\)\]{--tw-shadow:var(--shadow-2xl);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--shadow-lg\)\]{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--shadow-md\)\]{--tw-shadow:var(--shadow-md);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--shadow-sm\)\]{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--shadow-xs\)\]{--tw-shadow:var(--shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[8px\]{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-\[12px\]{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[all_var\(--transition-base\)\]{transition-property:all var(--transition-base);transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[var\(--transition-all\)\]{transition-property:var(--transition-all);transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[var\(--transition-colors\)\]{transition-property:var(--transition-colors);transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-focus-within\:text-\[var\(--md-primary\)\]:is(:where(.group):focus-within *){color:var(--md-primary)}.placeholder\:text-\[var\(--md-on-surface-variant\)\]::placeholder{color:var(--md-on-surface-variant)}.placeholder\:opacity-70::placeholder{opacity:.7}.focus-within\:border-\[var\(--border-color-focus\)\]:focus-within{border-color:var(--border-color-focus)}.focus-within\:border-\[var\(--md-error\)\]:focus-within{border-color:var(--md-error)}.focus-within\:\[box-shadow\:0_0_0_0\.1875rem_rgba\(47\,93\,140\,0\.15\)\]:focus-within{box-shadow:0 0 0 .1875rem #2f5d8c26}@media(hover:hover){.hover\:translate-y-\[-0\.125rem\]:hover{--tw-translate-y:-.125rem;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-\[var\(--border-color-hover\)\]:hover{border-color:var(--border-color-hover)}.hover\:border-\[var\(--md-primary\)\]:hover{border-color:var(--md-primary)}.hover\:bg-\[color\:color-mix\(in_srgb\,var\(--md-error\)_15\%\,var\(--md-surface\)\)\]:hover{background-color:var(--md-error)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-\[color\:color-mix\(in_srgb\,var\(--md-error\)_15\%\,var\(--md-surface\)\)\]:hover{background-color:color-mix(in srgb,var(--md-error) 15%,var(--md-surface))}}.hover\:bg-\[var\(--bg-hover\)\]:hover{background-color:var(--bg-hover)}.hover\:bg-\[var\(--bg-tertiary\)\]:hover{background-color:var(--bg-tertiary)}.hover\:bg-\[var\(--error-color-light\)\]:hover{background-color:var(--error-color-light)}.hover\:bg-\[var\(--info-color-light\)\]:hover{background-color:var(--info-color-light)}.hover\:bg-\[var\(--neutral-color-light\)\]:hover{background-color:var(--neutral-color-light)}.hover\:bg-\[var\(--primary-color-hover\)\]:hover{background-color:var(--primary-color-hover)}.hover\:bg-\[var\(--secondary-color-light\)\]:hover{background-color:var(--secondary-color-light)}.hover\:bg-\[var\(--success-color-light\)\]:hover{background-color:var(--success-color-light)}.hover\:bg-\[var\(--warning-color-light\)\]:hover{background-color:var(--warning-color-light)}.hover\:text-\[var\(--md-error\)\]:hover{color:var(--md-error)}.hover\:text-\[var\(--md-primary\)\]:hover{color:var(--md-primary)}.hover\:text-\[var\(--text-primary\)\]:hover{color:var(--text-primary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow-\[var\(--shadow-md\)\]:hover{--tw-shadow:var(--shadow-md);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:not-disabled\:not-focus\:border-\[var\(--border-color-hover\)\]:hover:not(:disabled):not(:focus){border-color:var(--border-color-hover)}}.focus\:border-\[var\(--border-color-focus\)\]:focus{border-color:var(--border-color-focus)}.focus\:border-\[var\(--md-error\)\]:focus{border-color:var(--md-error)}.focus\:\[box-shadow\:0_0_0_0\.1875rem_rgba\(47\,93\,140\,0\.15\)\]:focus{box-shadow:0 0 0 .1875rem #2f5d8c26}.focus\:\[box-shadow\:0_0_0_0\.1875rem_rgba\(186\,26\,26\,0\.2\)\]:focus{box-shadow:0 0 0 .1875rem #ba1a1a33}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-1:focus-visible{outline-offset:1px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-\[var\(--border-color-focus\)\]:focus-visible{outline-color:var(--border-color-focus)}.focus-visible\:outline-\[var\(--md-primary\)\]:focus-visible{outline-color:var(--md-primary)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-\[var\(--md-surface-container-high\)\]:disabled{background-color:var(--md-surface-container-high)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media not all and (min-width:48rem){.max-md\:w-full{width:100%}.max-md\:flex-col{flex-direction:column}.max-md\:flex-wrap{flex-wrap:wrap}.max-md\:justify-between{justify-content:space-between}.max-md\:gap-3{gap:calc(var(--spacing) * 3)}.max-md\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-md\:py-3{padding-block:calc(var(--spacing) * 3)}.max-md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.max-md\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}.\[\&_svg\]\:h-\[1\.125rem\] svg{height:1.125rem}.\[\&_svg\]\:w-\[1\.125rem\] svg{width:1.125rem}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}:root{--brand-verde-vibrante: #01b2aa;--brand-verde-profundo: #1f3a3a;--brand-grafite-azulado: #0f2f3a;--brand-azul-acinzentado: #5f7b8d;--brand-cinza-medio: #4b4b4b;--brand-cinza-escuro: #24262d;--brand-off-white: #eef0f4;--brand-off-white-gelo: #eef0f4;--brand-neutral-75: rgba(238, 240, 244, .75);--brand-branco: #ffffff;--brand-preto: #000000;--brand-cinza: #989495;--brand-azul-lavanda: #777dac;--brand-azul-intenso: #132c3b;--brand-cinza-azulado: #b4c2c7;--brand-verde-lima: #cffe40;--brand-off-white-criador: #e4e4e4;--brand-azul-escuro: #071a5c}:root{--font-primary: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-secondary: "Plus Jakarta Sans", var(--font-primary);--font-heading: var(--font-primary);--font-body: var(--font-primary);--font-logo: "Sora", var(--font-primary)}html{font-family:var(--font-body);font-size:1rem}:root{--primary-color: var(--brand-verde-vibrante);--primary-color-dark: var(--brand-verde-profundo);--primary-color-light: color-mix(in srgb, var(--brand-verde-vibrante) 84%, white);--primary-color-hover: var(--brand-verde-profundo);--md-primary: var(--brand-verde-vibrante);--md-on-primary: #ffffff;--md-primary-container: color-mix(in srgb, var(--brand-verde-vibrante) 18%, white);--md-on-primary-container: var(--brand-grafite-azulado);--secondary-color: var(--brand-grafite-azulado);--color-primary: var(--primary-color);--color-on-primary: var(--md-on-primary);--color-secondary: var(--secondary-color);--color-on-secondary: var(--md-on-secondary);--color-surface: var(--md-surface);--color-on-surface: var(--md-on-surface);--color-contrast: var(--brand-verde-lima);--md-secondary: var(--brand-grafite-azulado);--md-on-secondary: #ffffff;--md-outline: var(--brand-azul-acinzentado);--md-outline-variant: color-mix(in srgb, var(--brand-azul-acinzentado) 35%, white);--success-color: #22c55e;--success-color-light: #4ade80;--error-color: #ef4444;--error-color-light: #f87171;--md-error: #ba1a1a;--md-on-error: #ffffff;--warning-color: #f59e0b;--warning-color-light: #fbbe24;--info-color: #3b82f6;--info-color-light: #60a5fa;--neutral-color: var(--brand-cinza-medio);--neutral-color-light: var(--brand-azul-acinzentado);--secondary-color-light: var(--brand-azul-acinzentado);--bg-hover: color-mix(in srgb, var(--brand-grafite-azulado) 8%, white);--bg-active: color-mix(in srgb, var(--brand-grafite-azulado) 14%, white);--md-on-surface: var(--brand-grafite-azulado);--accent-color: var(--primary-color);--accent-color-hover: var(--primary-color-hover);--gradient-espectro-turquesa: linear-gradient( 135deg, #01b2aa 0%, #1f3a3a 100% );--bg-page: var(--brand-off-white-gelo);--bg-primary: var(--brand-off-white-gelo);--bg-secondary: #ffffff;--bg-tertiary: color-mix(in srgb, var(--brand-azul-acinzentado) 14%, white);--md-surface: #ffffff;--md-surface-container: var(--brand-neutral-75);--md-surface-container-high: color-mix(in srgb, var(--brand-azul-acinzentado) 14%, white);--border-color-hover: color-mix(in srgb, var(--brand-grafite-azulado) 32%, white);--bg-card: #ffffff;--bg-card-hover: color-mix(in srgb, var(--brand-azul-acinzentado) 8%, white);--bg-card-border: color-mix(in srgb, var(--brand-azul-acinzentado) 28%, white);--text-primary: var(--brand-grafite-azulado);--text-secondary: var(--brand-cinza-escuro);--text-tertiary: var(--brand-cinza-medio);--text-muted: var(--brand-cinza-medio);--text-on-primary: #ffffff;--border-color: color-mix(in srgb, var(--brand-azul-acinzentado) 30%, white);--border-color-focus: color-mix(in srgb, var(--brand-verde-vibrante) 52%, transparent);--shadow-xs: 0 .0625rem .125rem rgba(0, 0, 0, .05);--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .08);--shadow-md: 0 .25rem .75rem rgba(0, 0, 0, .1);--shadow-lg: 0 .5rem 1.5rem rgba(0, 0, 0, .12);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-normal: 1.5;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--border-radius-sm: .375rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--border-width-thin: .0625rem;--transition-base: .3s ease;--transition-all: all var(--transition-base);--transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);--motion-duration-instant: 75ms;--motion-duration-fast: .15s;--motion-duration-normal: .25s;--motion-duration-slow: .4s;--motion-duration-x-slow: .6s;--motion-easing-standard: cubic-bezier(.4, 0, .2, 1);--motion-easing-decelerate: cubic-bezier(0, 0, .2, 1);--motion-easing-accelerate: cubic-bezier(.4, 0, 1, 1);--motion-easing-spring: cubic-bezier(.34, 1.56, .64, 1);--z-index-dropdown: 1000;--z-index-modal-backdrop: 1040;--z-index-modal: 1050;--border-radius-2xl: 1.25rem;--shadow-2xl: 0 1.25rem 3.75rem rgba(0, 0, 0, .2);--font-size-2xl: 1.75rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--font-weight-light: 300;--line-height-tight: 1.2;--line-height-relaxed: 1.6;--line-height-loose: 1.8;--md-on-surface-variant: #44474e;--spacing-3xl: 2.5rem}[data-theme=dark],.theme-dark{--bg-page: #0a0d12;--bg-primary: #0f141a;--bg-secondary: #161b22;--bg-tertiary: #1b222b;--bg-card: #161b22;--bg-card-hover: #1e2630;--bg-card-border: #2f3a46;--md-surface: #161b22;--md-surface-container: #1b222b;--md-surface-container-high: #222b35;--md-on-surface: #e6e8eb;--md-on-surface-variant: #c2c7cf;--md-outline-variant: #44474e;--md-primary: var(--brand-verde-vibrante);--md-on-primary: #062126;--primary-color: var(--brand-verde-vibrante);--primary-color-light: color-mix(in srgb, var(--brand-verde-vibrante) 85%, white);--primary-color-hover: var(--brand-verde-profundo);--secondary-color: var(--brand-azul-acinzentado);--color-primary: var(--primary-color);--color-on-primary: var(--md-on-primary);--color-secondary: var(--secondary-color);--color-on-secondary: var(--md-on-secondary);--color-surface: var(--md-surface);--color-on-surface: var(--md-on-surface);--color-contrast: var(--brand-off-white);--text-primary: #e6e8eb;--text-secondary: #d1d5db;--text-muted: #9ca3af;--border-color: #2f3a46;--bg-hover: #202a34;--bg-active: #2a3642;--border-color-hover: #4b5b69;--shadow-sm: 0 .125rem .25rem 0 rgba(0, 0, 0, .4);--shadow-md: 0 .25rem .5rem 0 rgba(0, 0, 0, .5);--shadow-lg: 0 .5rem 1rem 0 rgba(0, 0, 0, .6)}[data-button-palette=verde-vibrante],.btn--palette-verde-vibrante.btn--primary,[data-button-palette=verde-vibrante] .btn--primary{--md-primary: var(--brand-verde-vibrante);--primary-color-hover: var(--brand-verde-profundo)}[data-button-palette=verde-profundo],.btn--palette-verde-profundo.btn--primary,[data-button-palette=verde-profundo] .btn--primary{--md-primary: var(--brand-verde-profundo);--primary-color-hover: var(--brand-grafite-azulado)}[data-button-palette=grafite-azulado],.btn--palette-grafite-azulado.btn--primary,[data-button-palette=grafite-azulado] .btn--primary{--md-primary: var(--brand-grafite-azulado);--primary-color-hover: var(--brand-cinza-escuro)}[data-button-palette=azul-acinzentado],.btn--palette-azul-acinzentado.btn--primary,[data-button-palette=azul-acinzentado] .btn--primary{--md-primary: var(--brand-azul-acinzentado);--primary-color-hover: var(--brand-grafite-azulado)}[data-button-palette=cinza-medio],.btn--palette-cinza-medio.btn--primary,[data-button-palette=cinza-medio] .btn--primary{--md-primary: var(--brand-cinza-medio);--primary-color-hover: var(--brand-cinza-escuro)}[data-button-palette=cinza-escuro],.btn--palette-cinza-escuro.btn--primary,[data-button-palette=cinza-escuro] .btn--primary{--md-primary: var(--brand-cinza-escuro);--primary-color-hover: var(--brand-preto)}[data-button-palette=off-white],.btn--palette-off-white.btn--primary,[data-button-palette=off-white] .btn--primary{--md-primary: var(--brand-off-white);--md-on-primary: var(--brand-grafite-azulado);--primary-color-hover: var(--brand-branco)}
|