@conatel-sa/react-ui 0.2.5 → 0.2.8
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 +180 -47
- package/dist/index.css +561 -5
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,88 +1,207 @@
|
|
|
1
1
|
# @conatel-sa/react-ui
|
|
2
2
|
|
|
3
|
-
Biblioteca de componentes React para productos **Conatel** y **Vivion**.
|
|
3
|
+
Biblioteca de **componentes de interfaz** para aplicaciones web hechas con **React** para productos **Conatel** y **Vivion**. Incluye botones, formularios, tablas, modales, tarjetas y más, con **dos estilos visuales** (temas) que se puede cambiar con una sola propiedad.
|
|
4
|
+
|
|
5
|
+
**¿Para qué sirve?** Para **reutilizar** pantallas y patrones de interfaz ya definidos: misma apariencia, menos trabajo de diseño pixel a pixel y menos CSS “a mano”. Sirve tanto para prototipos como para productos que quieran verse **uniformes y cuidados** en tipografía, colores y espaciados.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Qué necesitás antes de empezar
|
|
10
|
+
|
|
11
|
+
| Requisito | Notas |
|
|
12
|
+
|-----------|--------|
|
|
13
|
+
| **Node.js** (versión LTS recomendada) | Para ejecutar `npm` y crear el proyecto. [nodejs.org](https://nodejs.org/) |
|
|
14
|
+
| **Un proyecto React** | Por ejemplo creado con [Vite](https://vitejs.dev/) (`npm create vite@latest` → plantilla React + TypeScript). |
|
|
15
|
+
| **Conexión a internet** (instalación típica) | Para descargar el paquete desde el registro npm (ver más abajo si usás archivo `.tgz`). |
|
|
16
|
+
|
|
17
|
+
Podés partir de los ejemplos de este documento y adaptarlos a tu pantalla.
|
|
18
|
+
|
|
19
|
+
---
|
|
4
20
|
|
|
5
21
|
## Instalación
|
|
6
22
|
|
|
23
|
+
En la carpeta de tu proyecto React:
|
|
24
|
+
|
|
7
25
|
```bash
|
|
8
26
|
npm install @conatel-sa/react-ui
|
|
9
27
|
```
|
|
10
28
|
|
|
11
|
-
|
|
29
|
+
### Instalar desde un archivo `.tgz` (sin usar el registro en el momento)
|
|
30
|
+
|
|
31
|
+
Útil si trabajás **sin red** en el entorno del proyecto, o si querés **fijar** exactamente un paquete que ya descargaste.
|
|
12
32
|
|
|
13
|
-
|
|
33
|
+
**1. Obtener el archivo `.tgz`**
|
|
34
|
+
|
|
35
|
+
- **Con npm (recomendado):** en una carpeta vacía o temporal, con internet:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm pack @conatel-sa/react-ui
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Eso genera un archivo `conatel-sa-react-ui-<versión>.tgz` en esa carpeta (el nombre incluye la versión publicada). Ese es el paquete listo para instalar offline.
|
|
42
|
+
|
|
43
|
+
- **Desde la web:** en la página del paquete en npm podés revisar la versión actual y, si hace falta, usar el mismo comando `npm pack` arriba para bajar el tarball correspondiente.
|
|
44
|
+
|
|
45
|
+
**2. Instalarlo en tu proyecto React**
|
|
46
|
+
|
|
47
|
+
Ajustá la ruta al `.tgz` que tengas (por ejemplo lo copiaste al repo en `./releases/`):
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm install ./ruta/al/archivo/conatel-sa-react-ui-0.2.8.tgz
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
O en `package.json`:
|
|
54
|
+
|
|
55
|
+
```json
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"@conatel-sa/react-ui": "file:./releases/conatel-sa-react-ui-0.2.8.tgz"
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Luego: `npm install`.
|
|
62
|
+
|
|
63
|
+
> **Nota:** si no podés ejecutar `npm pack` ni acceder al registro npm, podés **pedir el `.tgz`** a quien distribuya el material del desafío o al equipo, e instalarlo con los mismos pasos del punto 2.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## Uso en 3 pasos
|
|
68
|
+
|
|
69
|
+
### 1. Importar los estilos (obligatorio)
|
|
70
|
+
|
|
71
|
+
Sin este archivo, los componentes **no se verán** con los colores y tipografías correctos. Ponelo **una vez** en el archivo de entrada de tu app (por ejemplo `main.tsx` o `main.jsx`):
|
|
14
72
|
|
|
15
73
|
```tsx
|
|
16
|
-
// main.tsx
|
|
17
74
|
import '@conatel-sa/react-ui/dist/index.css';
|
|
18
75
|
```
|
|
19
76
|
|
|
20
|
-
|
|
77
|
+
### 2. Envolver la app con el tema
|
|
78
|
+
|
|
79
|
+
Los componentes deben estar **dentro** de `ThemeProvider`. Elegís el tema visual con la prop `theme`:
|
|
21
80
|
|
|
22
81
|
```tsx
|
|
23
|
-
import { ThemeProvider
|
|
82
|
+
import { ThemeProvider } from '@conatel-sa/react-ui';
|
|
24
83
|
|
|
25
84
|
function App() {
|
|
26
85
|
return (
|
|
27
|
-
<ThemeProvider theme="conatel"
|
|
86
|
+
<ThemeProvider theme="conatel" as="div">
|
|
87
|
+
{/* Aquí van tus pantallas y componentes */}
|
|
88
|
+
</ThemeProvider>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
- `theme="conatel"` — estilo con acento rojo corporativo.
|
|
94
|
+
- `theme="vivion"` — estilo con acento azul.
|
|
95
|
+
|
|
96
|
+
### 3. Usar componentes
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
import { ThemeProvider, Button, Card, CardBody, Badge } from '@conatel-sa/react-ui';
|
|
100
|
+
|
|
101
|
+
function Ejemplo() {
|
|
102
|
+
return (
|
|
103
|
+
<ThemeProvider theme="conatel" as="div">
|
|
28
104
|
<Card>
|
|
29
|
-
<
|
|
30
|
-
|
|
105
|
+
<CardBody>
|
|
106
|
+
<Badge variant="success">Listo</Badge>
|
|
107
|
+
<Button variant="primary">Continuar</Button>
|
|
108
|
+
</CardBody>
|
|
31
109
|
</Card>
|
|
32
110
|
</ThemeProvider>
|
|
33
111
|
);
|
|
34
112
|
}
|
|
35
113
|
```
|
|
36
114
|
|
|
37
|
-
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## Shell de autenticación (login / registro)
|
|
38
118
|
|
|
39
|
-
|
|
119
|
+
Tras importar `dist/index.css`, tenés clases listas para pantallas partidas (marca + formulario), pensadas para apps que adoptan los temas Conatel o Vivion:
|
|
40
120
|
|
|
41
|
-
|
|
|
42
|
-
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
121
|
+
| Clase | Uso |
|
|
122
|
+
|--------|-----|
|
|
123
|
+
| `.login-split-container` | Contenedor flex a pantalla completa |
|
|
124
|
+
| `.login-brand-side` / `.login-form-side` | Columna izquierda (marca) y derecha (formulario) |
|
|
125
|
+
| `.auth-split--brand-end` | Modificador: formulario a la izquierda, marca compacta a la derecha |
|
|
126
|
+
| `.login-title` | Título con acento `--color-primary` del tema |
|
|
127
|
+
| `.login-split-container .btn-primary` | CTA con degradé, hover y estado deshabilitado “sin apagar” (carga) |
|
|
128
|
+
| `.auth-text-link`, `.login-remember-label` | Enlaces y label “recordarme” en gris co-marca |
|
|
129
|
+
| `.feature-icon` | Iconos de bullets en el panel marca (sombra suave, sin borde) |
|
|
130
|
+
|
|
131
|
+
Requisitos: el árbol debe estar bajo `ThemeProvider` (`theme-conatel` o `theme-vivion`) para que existan `--color-primary`, `--color-primary-hover` y `--color-primary-alpha`. El bloque se concatena desde `src/styles/app-chrome.css` al publicar `dist/index.css` (ver `tools/append-app-chrome.mjs` en el repo de la librería).
|
|
132
|
+
|
|
133
|
+
### Panel configuración (outline / eliminar)
|
|
134
|
+
|
|
135
|
+
| Clase | Uso |
|
|
136
|
+
|--------|-----|
|
|
137
|
+
| `.settings-outline-btn` (+ modificadores `--compact`, `--icon`, `--h50`, `--h42`, `--toolbar`, `--accent-text`) | Botón con borde neutro; hover/foco con `box-shadow` usando `--color-primary-alpha` (misma idea que `button.form-select:focus`) |
|
|
138
|
+
| `.settings-delete-outline-btn` + `.settings-delete-outline-btn__icon` | Ícono en `--color-danger`; al hover/foco el ícono pasa a `--color-accent-primary` (rojo Conatel / celeste Vivion) |
|
|
139
|
+
| `.settings-segment-btn` | Botones de segmento (ej. pestañas) con el mismo anillo al hover |
|
|
140
|
+
| `.settings-focus-ring` | Solo refuerza el anillo en controles que ya definen borde |
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Temas (resumen)
|
|
145
|
+
|
|
146
|
+
| Valor en código | Color principal aproximado | Uso típico |
|
|
147
|
+
|-----------------|----------------------------|------------|
|
|
148
|
+
| `conatel` | Rojo `#CC032E` | Identidad corporativa Conatel |
|
|
149
|
+
| `vivion` | Azul `#0098D4` | Identidad Vivion |
|
|
45
150
|
|
|
46
151
|
```tsx
|
|
47
|
-
<ThemeProvider theme="vivion">
|
|
48
|
-
<Button variant="primary">
|
|
152
|
+
<ThemeProvider theme="vivion" as="div">
|
|
153
|
+
<Button variant="primary">Acción principal</Button>
|
|
49
154
|
</ThemeProvider>
|
|
50
155
|
```
|
|
51
156
|
|
|
52
|
-
|
|
157
|
+
---
|
|
53
158
|
|
|
54
|
-
|
|
55
|
-
`Heading` - `Text`
|
|
159
|
+
## Si usás un asistente de código (opcional)
|
|
56
160
|
|
|
57
|
-
|
|
58
|
-
`Input` - `Textarea` - `Select` - `Checkbox` - `Toggle` - `FormField`
|
|
161
|
+
Texto de referencia que podés pegar para alinear criterios (no es obligatorio):
|
|
59
162
|
|
|
60
|
-
|
|
61
|
-
`Badge` - `Alert` - `Spinner` - `Progress`
|
|
163
|
+
> Estoy usando React y la librería `@conatel-sa/react-ui`. Importá `ThemeProvider` y los componentes que necesites desde `@conatel-sa/react-ui`. Preferí los componentes de la librería para botones e inputs en lugar de CSS global suelto. Importá `@conatel-sa/react-ui/dist/index.css` en el entry point.
|
|
62
164
|
|
|
63
|
-
|
|
64
|
-
`Card` - `CardHeader` - `CardBody` - `CardFooter` - `Modal`
|
|
165
|
+
---
|
|
65
166
|
|
|
66
|
-
|
|
67
|
-
`Navbar` - `NavItem` - `Tabs` - `TabList` - `Tab` - `TabPanel`
|
|
167
|
+
## Qué incluye el paquete principal
|
|
68
168
|
|
|
69
|
-
|
|
70
|
-
`Table` - `TableHead` - `TableBody` - `TableRow` - `TableCell` - `TableHeaderCell`
|
|
169
|
+
Import: `import { … } from '@conatel-sa/react-ui'`
|
|
71
170
|
|
|
72
|
-
|
|
73
|
-
|
|
171
|
+
| Área | Componentes (ejemplos) |
|
|
172
|
+
|------|-------------------------|
|
|
173
|
+
| Tipografía | `Heading`, `Text` |
|
|
174
|
+
| Formularios | `Input`, `Textarea`, `Select`, `Checkbox`, `Toggle`, `FormField` |
|
|
175
|
+
| Feedback | `Badge`, `Alert`, `Spinner`, `Progress` |
|
|
176
|
+
| Contenedores | `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Modal` |
|
|
177
|
+
| Navegación | `Navbar`, `NavItem`, `Tabs`, `TabList`, `Tab`, `TabPanel` |
|
|
178
|
+
| Datos | `Table`, `TableHead`, `TableBody`, `TableRow`, `TableCell`, `TableHeaderCell` |
|
|
179
|
+
| Otros | `Avatar`, `Divider`, `EmptyState`, `Button`, `Sidebar`, `SidebarItem`, `Toast`, `ScoreSelector` |
|
|
74
180
|
|
|
75
|
-
|
|
181
|
+
---
|
|
76
182
|
|
|
77
|
-
|
|
183
|
+
## Módulos opcionales (subrutas)
|
|
184
|
+
|
|
185
|
+
Además del paquete principal, podés importar **solo** lo que necesites desde rutas extra. Cada una tiene su documentación en tipos (`.d.ts`) dentro de `node_modules/@conatel-sa/react-ui/dist/`.
|
|
186
|
+
|
|
187
|
+
| Import | Para qué sirve |
|
|
188
|
+
|--------|----------------|
|
|
189
|
+
| `@conatel-sa/react-ui/icons` | Iconos Material Symbols y `IconProvider`. Suele hacer falta también: `import '@conatel-sa/react-ui/dist/material-symbols.css'` |
|
|
190
|
+
| `@conatel-sa/react-ui/forms` | Campos avanzados: `EmailInput`, `PasswordInput`, `MultiSelectDropdown`, `SingleSelectDropdown` y utilidades de validación de contraseña |
|
|
191
|
+
| `@conatel-sa/react-ui/cards` | Tarjetas y paneles: `ServiceCard`, `FeatureCard`, `ChangelogPanel`, `ArtifactReportCard` |
|
|
192
|
+
| `@conatel-sa/react-ui/dialogs` | Diálogos (p. ej. `ChangelogDialog`; requiere `react-dom`) |
|
|
193
|
+
| `@conatel-sa/react-ui/metrics` | `StatInline`, `MiniMeter` |
|
|
194
|
+
| `@conatel-sa/react-ui/status` | `StatusSummaryPopover` |
|
|
195
|
+
|
|
196
|
+
### Ejemplo: iconos
|
|
78
197
|
|
|
79
198
|
```tsx
|
|
80
199
|
import { Icon, IconProvider } from '@conatel-sa/react-ui/icons';
|
|
81
200
|
import '@conatel-sa/react-ui/dist/material-symbols.css';
|
|
82
201
|
|
|
83
|
-
function
|
|
202
|
+
function ConIconos() {
|
|
84
203
|
return (
|
|
85
|
-
<ThemeProvider theme="conatel">
|
|
204
|
+
<ThemeProvider theme="conatel" as="div">
|
|
86
205
|
<IconProvider injectStylesheet defaultSize="md">
|
|
87
206
|
<Icon name="search" size="md" />
|
|
88
207
|
</IconProvider>
|
|
@@ -91,20 +210,34 @@ function WithIcons() {
|
|
|
91
210
|
}
|
|
92
211
|
```
|
|
93
212
|
|
|
94
|
-
`lucide-react` es opcional (solo si usás `LucideIcon`).
|
|
213
|
+
`lucide-react` es **opcional** (solo si usás `LucideIcon`).
|
|
95
214
|
|
|
96
|
-
|
|
215
|
+
### Ejemplo: formularios extendidos
|
|
97
216
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
217
|
+
```tsx
|
|
218
|
+
import { EmailInput, PasswordInput } from '@conatel-sa/react-ui/forms';
|
|
219
|
+
import '@conatel-sa/react-ui/dist/index.css';
|
|
220
|
+
import '@conatel-sa/react-ui/dist/material-symbols.css';
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## Si algo no se ve bien (checklist rápido)
|
|
226
|
+
|
|
227
|
+
1. ¿Importaste `import '@conatel-sa/react-ui/dist/index.css'` en el entry (p. ej. `main.tsx`)?
|
|
228
|
+
2. ¿Tu contenido está **dentro** de `<ThemeProvider>`?
|
|
229
|
+
3. Si usás iconos o `./forms` con símbolos, ¿importaste también `material-symbols.css`?
|
|
230
|
+
4. ¿Tu proyecto usa **React 18**? (peer dependency del paquete.)
|
|
105
231
|
|
|
106
|
-
|
|
232
|
+
---
|
|
107
233
|
|
|
108
234
|
## TypeScript
|
|
109
235
|
|
|
110
|
-
La librería
|
|
236
|
+
La librería publica tipos (`.d.ts`). No necesitás instalar `@types` aparte para este paquete.
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
## Más ayuda
|
|
241
|
+
|
|
242
|
+
- Página del paquete en npm: [npmjs.com/package/@conatel-sa/react-ui](https://www.npmjs.com/package/@conatel-sa/react-ui)
|
|
243
|
+
- Si tu equipo mantiene un **repositorio workspace** con este código, ahí suelen estar `docs/` (subpaquetes, API de iconos y forms) y galerías HTML de demostración.
|
package/dist/index.css
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--font-sans: "Poppins", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-none: 0;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--duration-fast: .1s;--duration-base: .15s;--duration-slow: .25s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--color-success: #16a34a;--color-success-light: #dcfce7;--color-warning: #d97706;--color-warning-light: #fef3c7;--color-error: #dc2626;--color-error-light: #fee2e2;--color-info: #2563eb;--color-info-light: #dbeafe}.theme-conatel{--color-brand: #CC032E;--color-brand-hover: #a80025;--color-brand-active: #8a001e;--color-brand-light: #fce8ec;--color-brand-contrast: #ffffff;--color-accent: #757578;--color-accent-hover: #5e5e60;--color-accent-light: #f3f3f3;--color-primary: var(--color-brand);--color-primary-hover: var(--color-brand-hover);--color-primary-active: var(--color-brand-active);--color-primary-light: var(--color-brand-light);--color-primary-contrast: var(--color-brand-contrast);--color-secondary: var(--color-accent);--color-secondary-hover: var(--color-accent-hover);--color-secondary-light: var(--color-accent-light);--color-secondary-contrast: #ffffff;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-bg: #ffffff;--color-bg-alt: #f9f9f9;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-overlay: rgba(0, 0, 0, .45);--color-text: #1a1a1a;--color-text-muted: #6b6b6b;--color-text-subtle: #9b9b9b;--color-text-inverse: #ffffff;--color-text-link: var(--color-brand);--color-text-link-hover: var(--color-brand-hover);--color-border: #e0e0e0;--color-border-strong: #b0b0b0;--color-border-focus: var(--color-brand);--focus-ring: 0 0 0 3px rgba(204, 3, 46, .25);--input-bg: #ffffff;--input-border: var(--color-border);--input-border-focus: var(--color-brand);--input-radius: var(--radius-md);--btn-radius: var(--radius-md);--card-bg: var(--color-surface);--card-border: var(--color-border);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--badge-radius: var(--radius-full);--badge-primary-bg: var(--color-brand-light);--badge-primary-text: var(--color-brand)}.theme-vivion{--color-brand: #009CDE;--color-brand-hover: #007ab5;--color-brand-active: #005e8f;--color-brand-light: #e5f5fd;--color-brand-contrast: #ffffff;--color-accent: #BCC0C3;--color-accent-hover: #9ea3a7;--color-accent-light: #f4f5f5;--color-tertiary: #4F4F50;--color-tertiary-hover: #383839;--color-primary: var(--color-brand);--color-primary-hover: var(--color-brand-hover);--color-primary-active: var(--color-brand-active);--color-primary-light: var(--color-brand-light);--color-primary-contrast: var(--color-brand-contrast);--color-secondary: var(--color-accent);--color-secondary-hover: var(--color-accent-hover);--color-secondary-light: var(--color-accent-light);--color-secondary-contrast: #1a1a1a;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-bg: #ffffff;--color-bg-alt: #f8fafc;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-overlay: rgba(0, 0, 0, .45);--color-text: #1a1a1a;--color-text-muted: #4F4F50;--color-text-subtle: #9b9b9b;--color-text-inverse: #ffffff;--color-text-link: var(--color-brand);--color-text-link-hover: var(--color-brand-hover);--color-border: #e0e0e0;--color-border-strong: #b0b0b0;--color-border-focus: var(--color-brand);--focus-ring: 0 0 0 3px rgba(0, 156, 222, .25);--input-bg: #ffffff;--input-border: var(--color-border);--input-border-focus: var(--color-brand);--input-radius: var(--radius-md);--btn-radius: var(--radius-md);--card-bg: var(--color-surface);--card-border: var(--color-border);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--badge-radius: var(--radius-full);--badge-primary-bg: var(--color-brand-light);--badge-primary-text: var(--color-brand)}._button_s015b_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1.5px solid transparent;border-radius:var(--btn-radius, var(--radius-md));font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:var(--leading-tight);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}._button_s015b_1:focus-visible{box-shadow:var(--focus-ring)}._button_s015b_1:disabled,._button_s015b_1._loading_s015b_28{opacity:.5;cursor:not-allowed;pointer-events:none}._fullWidth_s015b_34{width:100%}._sm_s015b_39{padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}._md_s015b_44{padding:var(--space-2) var(--space-4);font-size:var(--text-base)}._lg_s015b_49{padding:var(--space-3) var(--space-6);font-size:var(--text-lg)}._primary_s015b_55{background-color:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}._primary_s015b_55:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}._primary_s015b_55:active:not(:disabled){background-color:var(--color-primary-active);border-color:var(--color-primary-active)}._secondary_s015b_71{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}._secondary_s015b_71:hover:not(:disabled){background-color:var(--color-primary-light)}._secondary_s015b_71:active:not(:disabled){background-color:var(--color-primary-light);border-color:var(--color-primary-active);color:var(--color-primary-active)}._ghost_s015b_87{background-color:transparent;color:var(--color-text);border-color:transparent}._ghost_s015b_87:hover:not(:disabled){background-color:var(--color-neutral-100)}._ghost_s015b_87:active:not(:disabled){background-color:var(--color-neutral-200)}._danger_s015b_101{background-color:var(--color-error);color:#fff;border-color:var(--color-error)}._danger_s015b_101:hover:not(:disabled){filter:brightness(.9)}._success_s015b_111{background-color:var(--color-success);color:#fff;border-color:var(--color-success)}._success_s015b_111:hover:not(:disabled){filter:brightness(.9)}._info_s015b_121{background-color:var(--color-info);color:#fff;border-color:var(--color-info)}._info_s015b_121:hover:not(:disabled){filter:brightness(.9)}._warning_s015b_131{background-color:var(--color-warning);color:#fff;border-color:var(--color-warning)}._warning_s015b_131:hover:not(:disabled){filter:brightness(.9)}._icon_s015b_142{display:inline-flex;align-items:center;flex-shrink:0;font-size:1.1em}._spinner_s015b_150{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:_spin_s015b_150 .6s linear infinite;flex-shrink:0}@keyframes _spin_s015b_150{to{transform:rotate(360deg)}}._heading_11ibi_1{font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text);margin:0}._light_11ibi_9{font-weight:var(--weight-medium)}._size-xs_11ibi_14{font-size:var(--text-xs)}._size-sm_11ibi_18{font-size:var(--text-sm)}._size-md_11ibi_22{font-size:var(--text-base)}._size-lg_11ibi_26{font-size:var(--text-lg)}._size-xl_11ibi_30{font-size:var(--text-xl)}._size-2xl_11ibi_34{font-size:var(--text-2xl)}._size-3xl_11ibi_38{font-size:var(--text-3xl)}._size-4xl_11ibi_42{font-size:var(--text-4xl)}._text_23jwr_1{font-family:var(--font-sans);line-height:var(--leading-normal);margin:0}._size-xs_23jwr_8{font-size:var(--text-xs)}._size-sm_23jwr_12{font-size:var(--text-sm)}._size-base_23jwr_16{font-size:var(--text-base)}._size-lg_23jwr_20{font-size:var(--text-lg)}._weight-light_23jwr_25{font-weight:var(--weight-light)}._weight-regular_23jwr_29{font-weight:var(--weight-regular)}._weight-medium_23jwr_33{font-weight:var(--weight-medium)}._weight-semibold_23jwr_37{font-weight:var(--weight-semibold)}._weight-bold_23jwr_41{font-weight:var(--weight-bold)}._color-default_23jwr_46{color:var(--color-text)}._color-muted_23jwr_50{color:var(--color-text-muted)}._color-subtle_23jwr_54{color:var(--color-text-subtle)}._color-inverse_23jwr_58{color:var(--color-text-inverse)}._color-primary_23jwr_62{color:var(--color-primary)}._color-error_23jwr_66{color:var(--color-error)}._align-left_23jwr_71{text-align:left}._align-center_23jwr_75{text-align:center}._align-right_23jwr_79{text-align:right}._wrapper_1gdyv_1{position:relative;display:inline-flex;align-items:center}._fullWidth_1gdyv_7,._fullWidth_1gdyv_7 ._input_1gdyv_8{width:100%}._input_1gdyv_8{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);width:100%}._input_1gdyv_8::placeholder{color:var(--color-text-subtle)}._input_1gdyv_8:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._input_1gdyv_8:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_1gdyv_44 ._input_1gdyv_8{border-color:var(--color-error)}._error_1gdyv_44 ._input_1gdyv_8:focus{border-color:var(--color-error);box-shadow:0 0 0 3px rgba(var(--color-error),.2)}._iconLeft_1gdyv_54,._iconRight_1gdyv_55{position:absolute;display:flex;align-items:center;color:var(--color-text-muted);pointer-events:none;font-size:1rem}._iconLeft_1gdyv_54{left:var(--space-3)}._iconRight_1gdyv_55{right:var(--space-3)}._hasIconLeft_1gdyv_72{padding-left:calc(var(--space-3) * 2 + 1rem)}._hasIconRight_1gdyv_76{padding-right:calc(var(--space-3) * 2 + 1rem)}._disabled_1gdyv_80{opacity:.5}._textarea_fomu3_1{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-3);outline:none;resize:vertical;min-height:100px;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}._textarea_fomu3_1::placeholder{color:var(--color-text-subtle)}._textarea_fomu3_1:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._textarea_fomu3_1:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_fomu3_33{border-color:var(--color-error)}._fullWidth_fomu3_37{width:100%}._wrapper_13qfs_1{position:relative;display:inline-block}._fullWidth_13qfs_6,._fullWidth_13qfs_6 ._select_13qfs_7{width:100%}._select_13qfs_7{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}._select_13qfs_7:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._select_13qfs_7:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_13qfs_41{border-color:var(--color-error)}._arrow_13qfs_45{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-muted);font-size:.85rem}._wrapper_199wu_1{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_199wu_9{opacity:.5;cursor:not-allowed}._input_199wu_15{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}._box_199wu_24{flex-shrink:0;width:1.125rem;height:1.125rem;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);display:flex;align-items:center;justify-content:center;transition:border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}._box_199wu_24:after{content:"";display:block;width:.3rem;height:.55rem;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);opacity:0;transition:opacity var(--duration-fast) var(--ease-default)}._input_199wu_15:checked+._box_199wu_24{background:var(--color-primary);border-color:var(--color-primary)}._input_199wu_15:checked+._box_199wu_24:after{opacity:1}._input_199wu_15:focus-visible+._box_199wu_24{box-shadow:var(--focus-ring);border-color:var(--color-primary)}._error_199wu_69 ._box_199wu_24{border-color:var(--color-error)}._label_199wu_73{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-normal)}._wrapper_1yn7j_1{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_1yn7j_9{opacity:.5;cursor:not-allowed}._input_1yn7j_14{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}._track_1yn7j_23{flex-shrink:0;position:relative;display:inline-block;background:var(--color-border-strong);border-radius:var(--radius-full);transition:background var(--duration-fast) var(--ease-default)}._input_1yn7j_14:checked~._track_1yn7j_23{background:var(--color-primary)}._input_1yn7j_14:focus-visible~._track_1yn7j_23{box-shadow:var(--focus-ring)}._thumb_1yn7j_41{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);transition:left var(--duration-fast) var(--ease-default)}._sm_1yn7j_52 ._track_1yn7j_23{width:2rem;height:1.1rem}._sm_1yn7j_52 ._thumb_1yn7j_41{width:.8rem;height:.8rem;left:.15rem}._sm_1yn7j_52 ._input_1yn7j_14:checked~._track_1yn7j_23 ._thumb_1yn7j_41{left:calc(100% - .8rem - .15rem)}._md_1yn7j_67 ._track_1yn7j_23{width:2.5rem;height:1.375rem}._md_1yn7j_67 ._thumb_1yn7j_41{width:1rem;height:1rem;left:.2rem}._md_1yn7j_67 ._input_1yn7j_14:checked~._track_1yn7j_23 ._thumb_1yn7j_41{left:calc(100% - 1.2rem)}._lg_1yn7j_82 ._track_1yn7j_23{width:3rem;height:1.625rem}._lg_1yn7j_82 ._thumb_1yn7j_41{width:1.2rem;height:1.2rem;left:.2rem}._lg_1yn7j_82 ._input_1yn7j_14:checked~._track_1yn7j_23 ._thumb_1yn7j_41{left:calc(100% - 1.4rem)}._label_1yn7j_97{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-normal)}._field_14vgz_1{display:flex;flex-direction:column;gap:var(--space-1)}._label_14vgz_7{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);line-height:var(--leading-normal)}._required_14vgz_15{color:var(--color-error)}._control_14vgz_19{display:flex;flex-direction:column}._hint_14vgz_24{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal)}._error_14vgz_32{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-error);margin:0;line-height:var(--leading-normal)}._badge_107ff_1{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--badge-radius, var(--radius-full));font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:1;white-space:nowrap}._sm_107ff_13{padding:.3rem var(--space-2);font-size:var(--text-xs)}._md_107ff_18{padding:.25rem var(--space-2);font-size:var(--text-sm)}._default_107ff_24{background:var(--color-neutral-100);color:var(--color-text-muted)}._primary_107ff_29{background:var(--badge-primary-bg, var(--color-primary-light));color:var(--badge-primary-text, var(--color-primary))}._success_107ff_34{background:var(--color-success-light);color:var(--color-success)}._warning_107ff_39{background:var(--color-warning-light);color:var(--color-warning)}._error_107ff_44{background:var(--color-error-light);color:var(--color-error)}._info_107ff_49{background:var(--color-info-light);color:var(--color-info)}._dot_107ff_55{display:inline-block;width:.5rem;height:.5rem;border-radius:var(--radius-full)}._dot-default_107ff_62{background:var(--color-neutral-400)}._dot-primary_107ff_66{background:var(--color-primary)}._dot-success_107ff_70{background:var(--color-success)}._dot-warning_107ff_74{background:var(--color-warning)}._dot-error_107ff_78{background:var(--color-error)}._dot-info_107ff_82{background:var(--color-info)}._alert_180sy_1{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-left:4px solid;font-family:var(--font-sans)}._info_180sy_11{background:var(--color-info-light);border-color:var(--color-info);color:var(--color-text)}._success_180sy_17{background:var(--color-success-light);border-color:var(--color-success);color:var(--color-text)}._warning_180sy_23{background:var(--color-warning-light);border-color:var(--color-warning);color:var(--color-text)}._error_180sy_29{background:var(--color-error-light);border-color:var(--color-error);color:var(--color-text)}._icon_180sy_35{flex-shrink:0;font-size:1.25rem;display:flex;margin-top:.05rem}._info_180sy_11 ._icon_180sy_35{color:var(--color-info)}._success_180sy_17 ._icon_180sy_35{color:var(--color-success)}._warning_180sy_23 ._icon_180sy_35{color:var(--color-warning)}._error_180sy_29 ._icon_180sy_35{color:var(--color-error)}._body_180sy_58{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}._title_180sy_65{font-weight:var(--weight-semibold);font-size:var(--text-sm);margin:0;color:var(--color-text)}._message_180sy_72{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-normal)}._close_180sy_78{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:.875rem;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity var(--duration-fast) var(--ease-default)}._close_180sy_78:hover{opacity:1}@keyframes _spin_vxqk3_11{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_vxqk3_11{animation:_spin_vxqk3_11 .8s linear infinite;color:var(--color-primary)}._xs_vxqk3_17{width:.75rem;height:.75rem}._sm_vxqk3_22{width:1rem;height:1rem}._md_vxqk3_27{width:1.5rem;height:1.5rem}._lg_vxqk3_32{width:2rem;height:2rem}._xl_vxqk3_37{width:3rem;height:3rem}._track_vxqk3_42{stroke:currentColor;opacity:.2}._arc_vxqk3_47{stroke:currentColor;stroke-dasharray:40 100}._wrapper_jkqgi_1{display:flex;flex-direction:column;gap:var(--space-1);width:100%}._header_jkqgi_8{display:flex;justify-content:space-between;align-items:baseline}._label_jkqgi_14{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}._value_jkqgi_21{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted)}._track_jkqgi_27{width:100%;background:var(--color-neutral-200);border-radius:var(--radius-full);overflow:hidden}._sm_jkqgi_34{height:4px}._md_jkqgi_38{height:8px}._lg_jkqgi_42{height:12px}._bar_jkqgi_46{height:100%;border-radius:var(--radius-full);transition:width var(--duration-base) var(--ease-out)}._primary_jkqgi_52{background:var(--color-primary)}._success_jkqgi_56{background:var(--color-success)}._warning_jkqgi_60{background:var(--color-warning)}._error_jkqgi_64{background:var(--color-error)}._card_mck7p_1{background:var(--card-bg, var(--color-surface));border-radius:var(--card-radius, var(--radius-lg));overflow:hidden;transition:box-shadow var(--duration-fast) var(--ease-default)}._bordered_mck7p_8{border:1px solid var(--card-border, var(--color-border))}._shadow_mck7p_12{box-shadow:var(--card-shadow, var(--shadow-sm))}._padded_mck7p_16{padding:var(--space-5)}._hoverable_mck7p_20:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}._header_mck7p_25{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}._body_mck7p_34{padding:var(--space-5)}._footer_mck7p_38{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}@keyframes _fadeIn_w87fm_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_w87fm_1{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}._backdrop_w87fm_23{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;z-index:var(--z-modal, 400);padding:var(--space-4);animation:_fadeIn_w87fm_1 var(--duration-fast) var(--ease-out)}._dialog_w87fm_35{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;width:100%;outline:none;animation:_slideUp_w87fm_1 var(--duration-base) var(--ease-out);overflow:hidden}._sm_w87fm_49{max-width:28rem}._md_w87fm_53{max-width:36rem}._lg_w87fm_57{max-width:48rem}._xl_w87fm_61{max-width:64rem}._full_w87fm_65{max-width:100%;max-height:100vh;border-radius:0}._header_w87fm_72{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);flex-shrink:0}._title_w87fm_81{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text)}._closeBtn_w87fm_88{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1rem;padding:var(--space-1);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--duration-fast) var(--ease-default)}._closeBtn_w87fm_88:hover{color:var(--color-text)}._closeBtn_w87fm_88:focus-visible{outline:none;box-shadow:var(--focus-ring)}._body_w87fm_111{padding:var(--space-5);overflow-y:auto;flex:1}._footer_w87fm_118{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-shrink:0}._tabs_18z4f_1{display:flex;flex-direction:column}._tabList_18z4f_6{display:flex;border-bottom:2px solid var(--color-border);gap:0;overflow-x:auto}._tab_18z4f_1{padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}._tab_18z4f_1:hover:not(:disabled){color:var(--color-text)}._tab_18z4f_1:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm) var(--radius-sm) 0 0}._tab_18z4f_1._active_18z4f_40{color:var(--color-primary);border-bottom-color:var(--color-primary)}._tab_18z4f_1:disabled{opacity:.4;cursor:not-allowed}._panel_18z4f_50{padding:var(--space-4) 0;outline:none}._navbar_1m6ra_1{background:var(--color-surface);border-bottom:1px solid var(--color-border);width:100%;position:sticky;top:0;z-index:var(--z-sticky, 300)}._transparent_1m6ra_10{background:transparent;border-color:transparent}._inner_1m6ra_15{max-width:1280px;margin:0 auto;padding:0 var(--space-5);height:4rem;display:flex;align-items:center;gap:var(--space-6)}._brand_1m6ra_25{flex-shrink:0}._nav_1m6ra_1{display:flex;align-items:center;gap:var(--space-1);flex:1}._actions_1m6ra_36{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}._navItem_1m6ra_43{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);text-decoration:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);transition:color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}._navItem_1m6ra_43:hover{color:var(--color-text);background:var(--color-neutral-100)}._navItem_1m6ra_43._active_1m6ra_60{color:var(--color-primary);background:var(--color-primary-light)}._wrapper_1wt6l_1{width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg)}._table_1wt6l_8{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:var(--text-sm)}._thead_1wt6l_16{background:var(--color-neutral-50)}._headerCell_1wt6l_20{text-align:left;font-weight:var(--weight-semibold);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);white-space:nowrap}._stickyHeader_1wt6l_29 ._thead_1wt6l_16 ._headerCell_1wt6l_20{position:sticky;top:0;background:var(--color-neutral-50);z-index:1}._sortable_1wt6l_36{cursor:pointer;-webkit-user-select:none;user-select:none}._sortable_1wt6l_36:hover{background:var(--color-neutral-100)}._headerContent_1wt6l_45{display:inline-flex;align-items:center;gap:var(--space-1)}._sortIcon_1wt6l_51{font-size:.75rem;color:var(--color-text-subtle)}._cell_1wt6l_57{padding:var(--space-3) var(--space-4);color:var(--color-text);border-bottom:1px solid var(--color-border);vertical-align:middle}._align-left_1wt6l_65{text-align:left}._align-center_1wt6l_69{text-align:center}._align-right_1wt6l_73{text-align:right}._row_1wt6l_78:last-child ._cell_1wt6l_57{border-bottom:none}._row_1wt6l_78:hover ._cell_1wt6l_57{background:var(--color-neutral-50)}._clickable_1wt6l_86{cursor:pointer}._selected_1wt6l_90 ._cell_1wt6l_57{background:var(--color-primary-light)}._striped_1wt6l_95 tbody tr:nth-child(2n) ._cell_1wt6l_57{background:var(--color-neutral-50)}._dense_1wt6l_99 ._cell_1wt6l_57,._dense_1wt6l_99 ._headerCell_1wt6l_20{padding:var(--space-2) var(--space-3)}._bordered_1wt6l_104 ._cell_1wt6l_57,._bordered_1wt6l_104 ._headerCell_1wt6l_20{border:1px solid var(--color-border)}._wrapper_ocp5v_1{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:visible;flex-shrink:0}._circle_ocp5v_11{border-radius:var(--radius-full)}._square_ocp5v_15{border-radius:var(--radius-md)}._xs_ocp5v_20{width:1.5rem;height:1.5rem;font-size:.55rem}._sm_ocp5v_26{width:2rem;height:2rem;font-size:.7rem}._md_ocp5v_32{width:2.5rem;height:2.5rem;font-size:.875rem}._lg_ocp5v_38{width:3.5rem;height:3.5rem;font-size:1.25rem}._xl_ocp5v_44{width:5rem;height:5rem;font-size:1.75rem}._img_ocp5v_50{width:100%;height:100%;object-fit:cover;border-radius:inherit}._initials_ocp5v_57{font-family:var(--font-sans);font-weight:var(--weight-semibold);color:var(--color-primary-contrast);background:var(--color-primary);border-radius:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-transform:uppercase}._status_ocp5v_72{position:absolute;bottom:2%;right:2%;width:25%;height:25%;min-width:8px;min-height:8px;border-radius:var(--radius-full);border:2px solid var(--color-bg)}._status-online_ocp5v_84{background:var(--color-success)}._status-away_ocp5v_88{background:var(--color-warning)}._status-busy_ocp5v_92{background:var(--color-error)}._status-offline_ocp5v_96{background:var(--color-neutral-400)}._horizontal_3x1p9_1{border:none;border-top:1px solid var(--color-border);margin:var(--space-4) 0}._vertical_3x1p9_7{display:inline-block;width:1px;height:1em;background:var(--color-border);vertical-align:middle;margin:0 var(--space-2)}._withLabel_3x1p9_16{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0}._line_3x1p9_23{flex:1;height:1px;background:var(--color-border)}._labelText_3x1p9_29{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-subtle);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}._wrapper_k3ofb_1{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-12, 3rem) var(--space-6);gap:var(--space-3)}._illustration_k3ofb_11{font-size:4rem;color:var(--color-neutral-300);margin-bottom:var(--space-2)}._title_k3ofb_17{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}._description_k3ofb_25{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-muted);margin:0;max-width:32rem;line-height:var(--leading-relaxed)}._action_k3ofb_34{margin-top:var(--space-2)}._sidebar_1hxle_1{display:flex;flex-direction:column;width:var(--sidebar-width, 240px);min-height:100vh;background-color:var(--color-surface);border-right:1px solid var(--color-border);transition:width var(--duration-slow) var(--ease-default);overflow:hidden;flex-shrink:0}._collapsed_1hxle_13{width:64px}._brand_1hxle_17{padding:var(--space-4) var(--space-4) var(--space-2);border-bottom:1px solid var(--color-border);flex-shrink:0;overflow:hidden}._nav_1hxle_24{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}._bottom_1hxle_33{flex-shrink:0;border-top:1px solid var(--color-border);display:flex;flex-direction:column}._footer_1hxle_40{padding:var(--space-3) var(--space-4);overflow:hidden}._collapseBtn_1hxle_45{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--space-2);background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:var(--text-base);transition:color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);outline:none}._collapseBtn_1hxle_45:hover{color:var(--color-text);background-color:var(--color-neutral-100)}._collapseBtn_1hxle_45:focus-visible{box-shadow:var(--focus-ring)}._item_1kjfi_1{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:none;background:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;cursor:pointer;width:100%;text-align:left;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);outline:none}._item_1kjfi_1:hover{background-color:var(--color-neutral-100);color:var(--color-text)}._item_1kjfi_1:focus-visible{box-shadow:var(--focus-ring)}._item_1kjfi_1._active_1kjfi_33{background-color:var(--color-primary-light);color:var(--color-primary);font-weight:var(--weight-semibold)}._item_1kjfi_1._collapsed_1kjfi_39{justify-content:center;padding:var(--space-2)}._icon_1kjfi_44{display:inline-flex;align-items:center;flex-shrink:0;font-size:1.1em}._label_1kjfi_51{flex:1;overflow:hidden;text-overflow:ellipsis}._toast_hjvoc_1{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);min-width:280px;max-width:400px;color:#fff;animation:_slideIn_hjvoc_1 var(--duration-slow) var(--ease-out)}@keyframes _slideIn_hjvoc_1{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}._success_hjvoc_28{background-color:var(--color-success)}._error_hjvoc_32{background-color:var(--color-error)}._warning_hjvoc_36{background-color:var(--color-warning)}._info_hjvoc_40{background-color:var(--color-info)}._icon_hjvoc_44{flex-shrink:0;font-size:var(--text-base);line-height:1}._message_hjvoc_50{flex:1;line-height:var(--leading-normal)}._close_hjvoc_55{flex-shrink:0;background:none;border:none;color:inherit;cursor:pointer;font-size:var(--text-sm);opacity:.8;padding:0;line-height:1;border-radius:var(--radius-sm);transition:opacity var(--duration-fast) var(--ease-default)}._close_hjvoc_55:hover{opacity:1}._close_hjvoc_55:focus-visible{box-shadow:var(--focus-ring);outline:none}._container_1a1az_1{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;padding:var(--space-4)}._container_1a1az_1>*{pointer-events:all}._top_right_1a1az_16{top:0;right:0;align-items:flex-end}._top_left_1a1az_22{top:0;left:0;align-items:flex-start}._bottom_right_1a1az_28{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}._bottom_left_1a1az_35{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}._top_center_1a1az_42{top:0;left:50%;transform:translate(-50%);align-items:center}._bottom_center_1a1az_49{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}._root_1m7ae_1{display:inline-flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}._sm_1m7ae_9 ._btn_1m7ae_9{width:28px;height:28px;font-size:var(--text-xs)}._md_1m7ae_15 ._btn_1m7ae_9{width:36px;height:36px;font-size:var(--text-sm)}._lg_1m7ae_21 ._btn_1m7ae_9{width:44px;height:44px;font-size:var(--text-base)}._btn_1m7ae_9{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-muted);font-family:var(--font-sans);font-weight:var(--weight-semibold);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);outline:none}._btn_1m7ae_9:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-light)}._btn_1m7ae_9:focus-visible{box-shadow:var(--focus-ring)}._btn_1m7ae_9._active_1m7ae_55{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-contrast)}._disabled_1m7ae_61{opacity:.5;pointer-events:none}._selectedLabel_1m7ae_66{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin-left:var(--space-2);font-style:italic}
|
|
2
2
|
/* __APP_CHROME__ */
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Formularios y shell de app (login partido, labels, inputs, botones nativos).
|
|
5
5
|
* Variables: heredan de .theme-conatel / .theme-vivion (ThemeProvider).
|
|
6
6
|
* Importar después de dist/index.css si se empaqueta aparte; en build se concatena a index.css.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
|
-
* Alias con
|
|
11
|
-
* El ThemeProvider en runtime
|
|
10
|
+
* Alias de tokens con nombres que suelen repetirse en la hoja global de la app anfitriona.
|
|
11
|
+
* El ThemeProvider en runtime define --color-brand / --color-brand-light pero no siempre expone --color-primary.
|
|
12
12
|
* Sin estos alias, bordes/fondos/accent quedan inválidos → inputs “sin caja”, paneles transparentes.
|
|
13
13
|
*/
|
|
14
14
|
.theme-conatel,
|
|
@@ -25,6 +25,19 @@
|
|
|
25
25
|
--color-text-secondary: var(--color-text-muted);
|
|
26
26
|
--color-accent-bg: var(--color-brand-light);
|
|
27
27
|
--color-bg-hover: var(--color-bg-alt);
|
|
28
|
+
/* Aliases para paneles de configuración / catálogo en la app anfitriona */
|
|
29
|
+
--color-accent-primary: var(--color-brand);
|
|
30
|
+
--color-bg-secondary: var(--color-bg-alt);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Halo de foco por tema (Conatel / Vivion); coherente con degradés y botón login */
|
|
34
|
+
.theme-conatel {
|
|
35
|
+
--color-primary-alpha: rgba(204, 3, 46, 0.1);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.theme-vivion {
|
|
39
|
+
/* #0098D4 (RGB 0,152,212) en Vivion; coherente con --focus-ring del ThemeProvider */
|
|
40
|
+
--color-primary-alpha: rgba(0, 152, 212, 0.12);
|
|
28
41
|
}
|
|
29
42
|
|
|
30
43
|
/* Login / cambio clave: label arriba del campo (como text-xs + font-semibold en la app) */
|
|
@@ -38,7 +51,7 @@
|
|
|
38
51
|
color: var(--color-text-primary);
|
|
39
52
|
}
|
|
40
53
|
|
|
41
|
-
/* Settings / catálogo: label de selects (
|
|
54
|
+
/* Settings / catálogo: label de selects (0.8125rem + texto secundario) */
|
|
42
55
|
.form-label-dropdown {
|
|
43
56
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
44
57
|
font-size: 0.8125rem;
|
|
@@ -61,7 +74,7 @@
|
|
|
61
74
|
border-color var(--duration-fast) var(--ease-default),
|
|
62
75
|
box-shadow var(--duration-fast) var(--ease-default),
|
|
63
76
|
background-color var(--duration-fast) var(--ease-default);
|
|
64
|
-
/* Superficie
|
|
77
|
+
/* Superficie de campo clara (--color-bg-tertiary) */
|
|
65
78
|
background-color: var(--color-bg-tertiary);
|
|
66
79
|
color: var(--color-text);
|
|
67
80
|
box-sizing: border-box;
|
|
@@ -130,6 +143,140 @@ input[type='radio'].form-input {
|
|
|
130
143
|
cursor: not-allowed;
|
|
131
144
|
}
|
|
132
145
|
|
|
146
|
+
/**
|
|
147
|
+
* Panel configuración / catálogo: botones con borde alineados a .form-input / button.form-select:focus
|
|
148
|
+
* (mismo anillo --color-primary-alpha). Eliminar: ícono rojo → acento del tema al hover/foco (celeste en Vivion).
|
|
149
|
+
*/
|
|
150
|
+
.settings-outline-btn,
|
|
151
|
+
.settings-delete-outline-btn {
|
|
152
|
+
font-size: 0.75rem;
|
|
153
|
+
font-family: inherit;
|
|
154
|
+
color: var(--color-text-secondary);
|
|
155
|
+
background: none;
|
|
156
|
+
border: 1px solid var(--color-border);
|
|
157
|
+
border-radius: var(--radius-md);
|
|
158
|
+
padding: 0.2rem 0.6rem;
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
display: inline-flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
gap: 0.2rem;
|
|
163
|
+
transition:
|
|
164
|
+
border-color var(--duration-fast, 0.15s) var(--ease-default, ease),
|
|
165
|
+
box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease),
|
|
166
|
+
opacity var(--duration-fast, 0.15s) var(--ease-default, ease);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.settings-outline-btn:hover:not(:disabled),
|
|
170
|
+
.settings-outline-btn:focus:not(:disabled),
|
|
171
|
+
.settings-delete-outline-btn:hover:not(:disabled),
|
|
172
|
+
.settings-delete-outline-btn:focus:not(:disabled) {
|
|
173
|
+
outline: none;
|
|
174
|
+
border-color: var(--color-accent-primary);
|
|
175
|
+
box-shadow: 0 0 0 3px var(--color-primary-alpha);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.settings-outline-btn:disabled,
|
|
179
|
+
.settings-delete-outline-btn:disabled {
|
|
180
|
+
opacity: 0.6;
|
|
181
|
+
cursor: not-allowed;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.settings-outline-btn--compact {
|
|
185
|
+
font-size: 0.7rem;
|
|
186
|
+
padding: 0.2rem 0.45rem;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.settings-outline-btn--icon {
|
|
190
|
+
font-size: 0.8rem;
|
|
191
|
+
padding: 0.3rem 0.6rem;
|
|
192
|
+
gap: 0.25rem;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.settings-outline-btn--h50 {
|
|
196
|
+
height: 50px;
|
|
197
|
+
min-height: 50px;
|
|
198
|
+
box-sizing: border-box;
|
|
199
|
+
font-size: 0.8125rem;
|
|
200
|
+
font-weight: 600;
|
|
201
|
+
padding: 0.3rem 0.75rem;
|
|
202
|
+
gap: 0.25rem;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.settings-outline-btn--h42 {
|
|
206
|
+
height: 42px;
|
|
207
|
+
min-height: 42px;
|
|
208
|
+
box-sizing: border-box;
|
|
209
|
+
font-size: 0.8125rem;
|
|
210
|
+
font-weight: 600;
|
|
211
|
+
padding: 0.25rem 0.65rem;
|
|
212
|
+
gap: 0.25rem;
|
|
213
|
+
white-space: nowrap;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.settings-outline-btn--toolbar {
|
|
217
|
+
font-size: 0.8125rem;
|
|
218
|
+
font-weight: 600;
|
|
219
|
+
padding: 0.3rem 0.75rem;
|
|
220
|
+
gap: 0.4rem;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.settings-outline-btn--accent-text {
|
|
224
|
+
color: var(--color-accent-primary);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.settings-outline-btn[aria-pressed='true'] {
|
|
228
|
+
background: var(--color-bg-secondary);
|
|
229
|
+
color: var(--color-text-primary);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.settings-segment-btn {
|
|
233
|
+
font-family: inherit;
|
|
234
|
+
font-size: 0.8125rem;
|
|
235
|
+
padding: 0.3rem 0.75rem;
|
|
236
|
+
border: 1px solid var(--color-border);
|
|
237
|
+
border-radius: var(--radius-md);
|
|
238
|
+
background: transparent;
|
|
239
|
+
cursor: pointer;
|
|
240
|
+
color: var(--color-text-secondary);
|
|
241
|
+
transition:
|
|
242
|
+
border-color var(--duration-fast, 0.15s) var(--ease-default, ease),
|
|
243
|
+
box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease),
|
|
244
|
+
background var(--duration-fast, 0.15s) var(--ease-default, ease),
|
|
245
|
+
color var(--duration-fast, 0.15s) var(--ease-default, ease);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.settings-segment-btn[data-active='true'] {
|
|
249
|
+
background: var(--color-bg-secondary);
|
|
250
|
+
color: var(--color-text-primary);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.settings-segment-btn:hover:not(:disabled),
|
|
254
|
+
.settings-segment-btn:focus-visible:not(:disabled) {
|
|
255
|
+
outline: none;
|
|
256
|
+
border-color: var(--color-accent-primary);
|
|
257
|
+
box-shadow: 0 0 0 3px var(--color-primary-alpha);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.settings-focus-ring {
|
|
261
|
+
transition: box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.settings-focus-ring:hover:not(:disabled),
|
|
265
|
+
.settings-focus-ring:focus-visible:not(:disabled) {
|
|
266
|
+
outline: none;
|
|
267
|
+
box-shadow: 0 0 0 3px var(--color-primary-alpha);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.settings-delete-outline-btn .settings-delete-outline-btn__icon {
|
|
271
|
+
color: var(--color-danger);
|
|
272
|
+
transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.settings-delete-outline-btn:hover:not(:disabled) .settings-delete-outline-btn__icon,
|
|
276
|
+
.settings-delete-outline-btn:focus:not(:disabled) .settings-delete-outline-btn__icon {
|
|
277
|
+
color: var(--color-accent-primary);
|
|
278
|
+
}
|
|
279
|
+
|
|
133
280
|
.input-password-wrap:focus-within {
|
|
134
281
|
outline: none;
|
|
135
282
|
border-color: var(--color-primary);
|
|
@@ -213,3 +360,412 @@ label:has(> input[type='checkbox'][class*='_input_']) > span[class*='_box_']::af
|
|
|
213
360
|
transform: rotate(45deg) !important;
|
|
214
361
|
transform-origin: center center !important;
|
|
215
362
|
}
|
|
363
|
+
|
|
364
|
+
/* =============================================================================
|
|
365
|
+
* Shell de pantallas auth (login / registro / recuperación)
|
|
366
|
+
* Requiere variables de acento en ancestro (--color-primary, --color-primary-hover)
|
|
367
|
+
* p. ej. ThemeProvider (.theme-conatel / .theme-vivion) o tokens equivalentes en :root.
|
|
368
|
+
* ============================================================================= */
|
|
369
|
+
|
|
370
|
+
.login-split-container {
|
|
371
|
+
--auth-gray-700: #5f6062;
|
|
372
|
+
--auth-gray-600: #757578;
|
|
373
|
+
--auth-gray-400: #bcc0c3;
|
|
374
|
+
--login-brand-bg-from: #fcfdfe;
|
|
375
|
+
--login-brand-bg-via: #f6f8fb;
|
|
376
|
+
--login-brand-bg-to: #eef1f5;
|
|
377
|
+
--login-brand-veil: rgba(95, 96, 98, 0.038);
|
|
378
|
+
--login-brand-wash: rgba(255, 255, 255, 0.85);
|
|
379
|
+
display: flex;
|
|
380
|
+
height: 100vh;
|
|
381
|
+
width: 100%;
|
|
382
|
+
max-width: 100vw;
|
|
383
|
+
overflow: hidden;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.login-brand-side {
|
|
387
|
+
flex: 1;
|
|
388
|
+
background:
|
|
389
|
+
radial-gradient(ellipse 85% 65% at 12% 8%, var(--login-brand-wash) 0%, transparent 52%),
|
|
390
|
+
radial-gradient(ellipse 70% 55% at 92% 88%, rgba(255, 255, 255, 0.5) 0%, transparent 48%),
|
|
391
|
+
linear-gradient(
|
|
392
|
+
152deg,
|
|
393
|
+
var(--login-brand-bg-from) 0%,
|
|
394
|
+
var(--login-brand-bg-via) 42%,
|
|
395
|
+
var(--login-brand-bg-to) 100%
|
|
396
|
+
);
|
|
397
|
+
color: var(--auth-gray-700);
|
|
398
|
+
border-right: none;
|
|
399
|
+
display: flex;
|
|
400
|
+
flex-direction: column;
|
|
401
|
+
justify-content: center;
|
|
402
|
+
padding: 4rem;
|
|
403
|
+
position: relative;
|
|
404
|
+
overflow: hidden;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.login-brand-side--compact {
|
|
408
|
+
padding: 3rem 2.5rem;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.login-split-container.auth-split--brand-end {
|
|
412
|
+
flex-direction: row;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.login-split-container.auth-split--brand-end .login-form-side {
|
|
416
|
+
border-left: none;
|
|
417
|
+
border-right: 1px solid var(--auth-gray-400);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.login-split-container.auth-split--brand-end .login-brand-side {
|
|
421
|
+
flex: 1;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.login-brand-side::before {
|
|
425
|
+
content: '';
|
|
426
|
+
position: absolute;
|
|
427
|
+
inset: 0;
|
|
428
|
+
pointer-events: none;
|
|
429
|
+
background-image: radial-gradient(
|
|
430
|
+
circle at 1px 1px,
|
|
431
|
+
var(--login-brand-veil) 1px,
|
|
432
|
+
transparent 0
|
|
433
|
+
);
|
|
434
|
+
background-size: 22px 22px;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.login-brand-logo-wrap {
|
|
438
|
+
display: inline-flex;
|
|
439
|
+
align-items: center;
|
|
440
|
+
justify-content: center;
|
|
441
|
+
padding: 0.35rem 0;
|
|
442
|
+
margin-bottom: 1.5rem;
|
|
443
|
+
max-width: 100%;
|
|
444
|
+
background: none;
|
|
445
|
+
border: none;
|
|
446
|
+
border-radius: 0;
|
|
447
|
+
box-shadow: none;
|
|
448
|
+
filter: drop-shadow(0 3px 14px rgba(95, 96, 98, 0.09));
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.auth-brand-tagline {
|
|
452
|
+
margin: 0;
|
|
453
|
+
font-size: 0.9375rem;
|
|
454
|
+
line-height: 1.55;
|
|
455
|
+
color: var(--auth-gray-600);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.auth-brand-tagline strong {
|
|
459
|
+
color: var(--auth-gray-700);
|
|
460
|
+
font-weight: 600;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.brand-content--compact {
|
|
464
|
+
max-width: 380px;
|
|
465
|
+
margin: 0 auto;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.brand-content {
|
|
469
|
+
position: relative;
|
|
470
|
+
z-index: 2;
|
|
471
|
+
max-width: 600px;
|
|
472
|
+
margin: 0 auto;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.brand-logo-large {
|
|
476
|
+
width: 200px;
|
|
477
|
+
margin-bottom: 0;
|
|
478
|
+
display: block;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.brand-content p {
|
|
482
|
+
font-size: 1.0625rem;
|
|
483
|
+
line-height: 1.65;
|
|
484
|
+
color: var(--auth-gray-600);
|
|
485
|
+
margin-bottom: 2.25rem;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.brand-content p strong {
|
|
489
|
+
color: var(--auth-gray-700);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.brand-features {
|
|
493
|
+
display: grid;
|
|
494
|
+
gap: 1.5rem;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.feature-item {
|
|
498
|
+
display: flex;
|
|
499
|
+
align-items: center;
|
|
500
|
+
gap: 1rem;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.feature-icon {
|
|
504
|
+
width: 36px;
|
|
505
|
+
height: 36px;
|
|
506
|
+
flex-shrink: 0;
|
|
507
|
+
background: rgba(255, 255, 255, 0.55);
|
|
508
|
+
border: none;
|
|
509
|
+
border-radius: 50%;
|
|
510
|
+
display: flex;
|
|
511
|
+
align-items: center;
|
|
512
|
+
justify-content: center;
|
|
513
|
+
box-shadow:
|
|
514
|
+
0 1px 2px rgba(95, 96, 98, 0.06),
|
|
515
|
+
0 4px 12px rgba(95, 96, 98, 0.06);
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.login-brand-side .feature-icon svg {
|
|
519
|
+
color: var(--auth-gray-700);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.login-brand-side .feature-item > span:last-child {
|
|
523
|
+
color: var(--auth-gray-700);
|
|
524
|
+
font-weight: 500;
|
|
525
|
+
font-size: 0.9375rem;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.login-form-side {
|
|
529
|
+
flex: 0 0 480px;
|
|
530
|
+
background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
|
|
531
|
+
display: flex;
|
|
532
|
+
flex-direction: column;
|
|
533
|
+
justify-content: center;
|
|
534
|
+
padding: 4rem;
|
|
535
|
+
border-left: 1px solid var(--auth-gray-400);
|
|
536
|
+
box-shadow: -16px 0 48px -24px rgba(95, 96, 98, 0.1);
|
|
537
|
+
position: relative;
|
|
538
|
+
z-index: 5;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
/* CTA: acento del tema; disabled sin apagar (estado “Verificando…”) */
|
|
542
|
+
.login-split-container .btn-primary {
|
|
543
|
+
background: linear-gradient(
|
|
544
|
+
180deg,
|
|
545
|
+
color-mix(in srgb, var(--color-primary) 92%, #ffffff) 0%,
|
|
546
|
+
var(--color-primary) 45%,
|
|
547
|
+
var(--color-primary-hover) 100%
|
|
548
|
+
);
|
|
549
|
+
color: #fff;
|
|
550
|
+
border: none;
|
|
551
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
552
|
+
cursor: pointer;
|
|
553
|
+
font-weight: 600;
|
|
554
|
+
border-radius: var(--radius-md, 6px);
|
|
555
|
+
width: 100%;
|
|
556
|
+
display: inline-flex;
|
|
557
|
+
justify-content: center;
|
|
558
|
+
align-items: center;
|
|
559
|
+
transition:
|
|
560
|
+
background-color var(--duration-fast, 0.15s) ease,
|
|
561
|
+
transform var(--duration-fast, 0.15s) ease,
|
|
562
|
+
box-shadow var(--duration-fast, 0.15s) ease,
|
|
563
|
+
filter var(--duration-fast, 0.15s) ease;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.login-split-container .btn-primary:hover:not(:disabled) {
|
|
567
|
+
background: linear-gradient(
|
|
568
|
+
180deg,
|
|
569
|
+
var(--color-primary) 0%,
|
|
570
|
+
var(--color-primary-hover) 100%
|
|
571
|
+
);
|
|
572
|
+
filter: brightness(1.03);
|
|
573
|
+
transform: translateY(-1px);
|
|
574
|
+
box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.login-split-container .btn-primary:focus-visible {
|
|
578
|
+
outline: none;
|
|
579
|
+
box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(204, 3, 46, 0.2));
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.login-split-container .btn-primary:disabled {
|
|
583
|
+
opacity: 1;
|
|
584
|
+
cursor: wait;
|
|
585
|
+
filter: none;
|
|
586
|
+
transform: none;
|
|
587
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
|
|
588
|
+
animation: ru-auth-submit-pulse 1.1s ease-in-out infinite;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
@keyframes ru-auth-submit-pulse {
|
|
592
|
+
0%,
|
|
593
|
+
100% {
|
|
594
|
+
filter: brightness(1);
|
|
595
|
+
}
|
|
596
|
+
50% {
|
|
597
|
+
filter: brightness(1.08);
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
@media (prefers-reduced-motion: reduce) {
|
|
602
|
+
.login-split-container .btn-primary:disabled {
|
|
603
|
+
animation: none;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.login-split-container .btn-primary:hover:not(:disabled) {
|
|
607
|
+
transform: none;
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.auth-text-link {
|
|
612
|
+
font-size: 0.875rem;
|
|
613
|
+
color: var(--auth-gray-600);
|
|
614
|
+
text-decoration: none;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.auth-text-link:hover {
|
|
618
|
+
color: var(--auth-gray-700);
|
|
619
|
+
text-decoration: underline;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.login-split-container .form-group > label {
|
|
623
|
+
color: var(--auth-gray-700);
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.login-split-container .form-input,
|
|
627
|
+
.login-split-container .input-password-wrap {
|
|
628
|
+
border-color: var(--auth-gray-400);
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.login-split-container input[type='checkbox'] {
|
|
632
|
+
accent-color: var(--auth-gray-700);
|
|
633
|
+
width: 1.05rem;
|
|
634
|
+
height: 1.05rem;
|
|
635
|
+
cursor: pointer;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.login-remember-label {
|
|
639
|
+
margin: 0;
|
|
640
|
+
font-size: 0.875rem;
|
|
641
|
+
color: var(--auth-gray-600);
|
|
642
|
+
cursor: pointer;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.login-header {
|
|
646
|
+
margin-bottom: 3rem;
|
|
647
|
+
text-align: center;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.login-title {
|
|
651
|
+
font-size: 2rem;
|
|
652
|
+
font-weight: 700;
|
|
653
|
+
color: var(--color-primary, var(--auth-gray-700));
|
|
654
|
+
margin-bottom: 0.5rem;
|
|
655
|
+
letter-spacing: -0.02em;
|
|
656
|
+
text-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary, var(--auth-gray-700)) 12%, transparent);
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.login-subtitle {
|
|
660
|
+
color: var(--auth-gray-600);
|
|
661
|
+
font-weight: 500;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
.auth-page-title {
|
|
665
|
+
font-size: 1.5rem;
|
|
666
|
+
font-weight: 700;
|
|
667
|
+
margin-bottom: 0.5rem;
|
|
668
|
+
color: var(--auth-gray-700);
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.auth-page-subtitle {
|
|
672
|
+
color: var(--auth-gray-600);
|
|
673
|
+
margin-bottom: 1.5rem;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.login-footer {
|
|
677
|
+
margin-top: 3rem;
|
|
678
|
+
text-align: center;
|
|
679
|
+
font-size: 0.75rem;
|
|
680
|
+
color: var(--color-text-muted, var(--auth-gray-600));
|
|
681
|
+
line-height: 1.6;
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
.login-footer a {
|
|
685
|
+
color: var(--auth-gray-600);
|
|
686
|
+
text-decoration: none;
|
|
687
|
+
font-weight: 500;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.login-footer a:hover {
|
|
691
|
+
color: var(--auth-gray-700);
|
|
692
|
+
text-decoration: underline;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.login-split-container .form-group {
|
|
696
|
+
margin-bottom: var(--space-4, 1rem);
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
@media (max-width: 900px) {
|
|
700
|
+
.login-split-container {
|
|
701
|
+
flex-direction: column;
|
|
702
|
+
overflow-y: auto;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.login-split-container .login-form-side {
|
|
706
|
+
border-left: none;
|
|
707
|
+
border-right: none;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.login-split-container:not(.auth-split--brand-end) .login-form-side {
|
|
711
|
+
border-top: 1px solid var(--auth-gray-400);
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
.login-split-container.auth-split--brand-end .login-form-side {
|
|
715
|
+
border-bottom: 1px solid var(--auth-gray-400);
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.login-brand-side {
|
|
719
|
+
padding: var(--space-6, 1.5rem);
|
|
720
|
+
min-height: 200px;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.brand-logo-large {
|
|
724
|
+
width: 150px;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.brand-content h1 {
|
|
728
|
+
font-size: 1.5rem;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.brand-features {
|
|
732
|
+
display: none;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.login-form-side {
|
|
736
|
+
padding: var(--space-6, 1.5rem);
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
/**
|
|
741
|
+
* Toast (@conatel-sa/react-ui): paleta tipo richColors (tema light).
|
|
742
|
+
* ToastProvider hace portal a document.body, fuera del nodo con .theme-conatel / .theme-vivion:
|
|
743
|
+
* no usar ancestro .theme-* aquí. Los hashes `_toast_` / `_success_` vienen del CSS module del Toast.
|
|
744
|
+
*/
|
|
745
|
+
[class*='_toast_'][class*='_success_'] {
|
|
746
|
+
background-color: hsl(143, 85%, 96%) !important;
|
|
747
|
+
border: 1px solid hsl(145, 92%, 91%) !important;
|
|
748
|
+
color: hsl(140, 100%, 27%) !important;
|
|
749
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
[class*='_toast_'][class*='_warning_'] {
|
|
753
|
+
background-color: hsl(49, 100%, 97%) !important;
|
|
754
|
+
border: 1px solid hsl(49, 91%, 91%) !important;
|
|
755
|
+
color: hsl(31, 92%, 45%) !important;
|
|
756
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
[class*='_toast_'][class*='_error_'] {
|
|
760
|
+
background-color: hsl(359, 100%, 97%) !important;
|
|
761
|
+
border: 1px solid hsl(359, 100%, 94%) !important;
|
|
762
|
+
color: hsl(360, 100%, 45%) !important;
|
|
763
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
[class*='_toast_'][class*='_info_'] {
|
|
767
|
+
background-color: hsl(208, 100%, 97%) !important;
|
|
768
|
+
border: 1px solid hsl(221, 91%, 91%) !important;
|
|
769
|
+
color: hsl(210, 92%, 45%) !important;
|
|
770
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
771
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@conatel-sa/react-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"description": "Biblioteca de componentes React para productos Conatel y Vivion. Incluye más de 20 componentes UI con theming. Subpaquetes opcionales: ./icons, ./forms, ./cards, ./dialogs, ./metrics, ./status.",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -46,7 +46,8 @@
|
|
|
46
46
|
}
|
|
47
47
|
},
|
|
48
48
|
"files": [
|
|
49
|
-
"dist"
|
|
49
|
+
"dist",
|
|
50
|
+
"README.md"
|
|
50
51
|
],
|
|
51
52
|
"scripts": {
|
|
52
53
|
"dev": "vite",
|