@conatel-sa/react-ui 0.2.6 → 0.2.8

package/README.md

@@ -47,14 +47,14 @@ npm install @conatel-sa/react-ui
 Ajustá la ruta al `.tgz` que tengas (por ejemplo lo copiaste al repo en `./releases/`):
 
 ```bash
-npm install ./ruta/al/archivo/conatel-sa-react-ui-0.2.6.tgz
+npm install ./ruta/al/archivo/conatel-sa-react-ui-0.2.8.tgz
 ```
 
 O en `package.json`:
 
 ```json
 "dependencies": {
-  "@conatel-sa/react-ui": "file:./releases/conatel-sa-react-ui-0.2.6.tgz"
+  "@conatel-sa/react-ui": "file:./releases/conatel-sa-react-ui-0.2.8.tgz"
 }
 ```
 
@@ -114,6 +114,33 @@ function Ejemplo() {
 
 ---
 
+## Shell de autenticación (login / registro)
+
+Tras importar `dist/index.css`, tenés clases listas para pantallas partidas (marca + formulario), pensadas para apps que adoptan los temas Conatel o Vivion:
+
+| Clase | Uso |
+|--------|-----|
+| `.login-split-container` | Contenedor flex a pantalla completa |
+| `.login-brand-side` / `.login-form-side` | Columna izquierda (marca) y derecha (formulario) |
+| `.auth-split--brand-end` | Modificador: formulario a la izquierda, marca compacta a la derecha |
+| `.login-title` | Título con acento `--color-primary` del tema |
+| `.login-split-container .btn-primary` | CTA con degradé, hover y estado deshabilitado “sin apagar” (carga) |
+| `.auth-text-link`, `.login-remember-label` | Enlaces y label “recordarme” en gris co-marca |
+| `.feature-icon` | Iconos de bullets en el panel marca (sombra suave, sin borde) |
+
+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).
+
+### Panel configuración (outline / eliminar)
+
+| Clase | Uso |
+|--------|-----|
+| `.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`) |
+| `.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) |
+| `.settings-segment-btn` | Botones de segmento (ej. pestañas) con el mismo anillo al hover |
+| `.settings-focus-ring` | Solo refuerza el anillo en controles que ya definen borde |
+
+---
+
 ## Temas (resumen)
 
 | Valor en código | Color principal aproximado | Uso típico |

package/dist/index.css

@@ -1,14 +1,14 @@
 @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}
 /* __APP_CHROME__ */
 /**
- * Estilos de formulario alineados al shell de app (mismas clases que en ia-agents).
+ * Formularios y shell de app (login partido, labels, inputs, botones nativos).
  * Variables: heredan de .theme-conatel / .theme-vivion (ThemeProvider).
  * Importar después de dist/index.css si se empaqueta aparte; en build se concatena a index.css.
  */
 
 /**
- * Alias con mismos nombres que apps tipo ia-agents (globals.css).
- * El ThemeProvider en runtime (index.umd) define --color-brand / --color-brand-light pero NO --color-primary.
+ * Alias de tokens con nombres que suelen repetirse en la hoja global de la app anfitriona.
+ * El ThemeProvider en runtime define --color-brand / --color-brand-light pero no siempre expone --color-primary.
  * Sin estos alias, bordes/fondos/accent quedan inválidos → inputs “sin caja”, paneles transparentes.
  */
 .theme-conatel,
@@ -25,6 +25,19 @@
   --color-text-secondary: var(--color-text-muted);
   --color-accent-bg: var(--color-brand-light);
   --color-bg-hover: var(--color-bg-alt);
+  /* Aliases para paneles de configuración / catálogo en la app anfitriona */
+  --color-accent-primary: var(--color-brand);
+  --color-bg-secondary: var(--color-bg-alt);
+}
+
+/* Halo de foco por tema (Conatel / Vivion); coherente con degradés y botón login */
+.theme-conatel {
+  --color-primary-alpha: rgba(204, 3, 46, 0.1);
+}
+
+.theme-vivion {
+  /* #0098D4 (RGB 0,152,212) en Vivion; coherente con --focus-ring del ThemeProvider */
+  --color-primary-alpha: rgba(0, 152, 212, 0.12);
 }
 
 /* Login / cambio clave: label arriba del campo (como text-xs + font-semibold en la app) */
@@ -38,7 +51,7 @@
   color: var(--color-text-primary);
 }
 
-/* Settings / catálogo: label de selects (como 0.8125rem + text-secondary en ia-agents) */
+/* Settings / catálogo: label de selects (0.8125rem + texto secundario) */
 .form-label-dropdown {
   font-family: var(--font-sans), system-ui, sans-serif;
   font-size: 0.8125rem;
@@ -61,7 +74,7 @@
     border-color var(--duration-fast) var(--ease-default),
     box-shadow var(--duration-fast) var(--ease-default),
     background-color var(--duration-fast) var(--ease-default);
-  /* Superficie blanca de campo (como ia-agents --color-bg-tertiary en inputs) */
+  /* Superficie de campo clara (--color-bg-tertiary) */
   background-color: var(--color-bg-tertiary);
   color: var(--color-text);
   box-sizing: border-box;
@@ -130,6 +143,140 @@ input[type='radio'].form-input {
   cursor: not-allowed;
 }
 
+/**
+ * Panel configuración / catálogo: botones con borde alineados a .form-input / button.form-select:focus
+ * (mismo anillo --color-primary-alpha). Eliminar: ícono rojo → acento del tema al hover/foco (celeste en Vivion).
+ */
+.settings-outline-btn,
+.settings-delete-outline-btn {
+  font-size: 0.75rem;
+  font-family: inherit;
+  color: var(--color-text-secondary);
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.2rem 0.6rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  transition:
+    border-color var(--duration-fast, 0.15s) var(--ease-default, ease),
+    box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease),
+    opacity var(--duration-fast, 0.15s) var(--ease-default, ease);
+}
+
+.settings-outline-btn:hover:not(:disabled),
+.settings-outline-btn:focus:not(:disabled),
+.settings-delete-outline-btn:hover:not(:disabled),
+.settings-delete-outline-btn:focus:not(:disabled) {
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha);
+}
+
+.settings-outline-btn:disabled,
+.settings-delete-outline-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.settings-outline-btn--compact {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.45rem;
+}
+
+.settings-outline-btn--icon {
+  font-size: 0.8rem;
+  padding: 0.3rem 0.6rem;
+  gap: 0.25rem;
+}
+
+.settings-outline-btn--h50 {
+  height: 50px;
+  min-height: 50px;
+  box-sizing: border-box;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  padding: 0.3rem 0.75rem;
+  gap: 0.25rem;
+}
+
+.settings-outline-btn--h42 {
+  height: 42px;
+  min-height: 42px;
+  box-sizing: border-box;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  padding: 0.25rem 0.65rem;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.settings-outline-btn--toolbar {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  padding: 0.3rem 0.75rem;
+  gap: 0.4rem;
+}
+
+.settings-outline-btn--accent-text {
+  color: var(--color-accent-primary);
+}
+
+.settings-outline-btn[aria-pressed='true'] {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.settings-segment-btn {
+  font-family: inherit;
+  font-size: 0.8125rem;
+  padding: 0.3rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition:
+    border-color var(--duration-fast, 0.15s) var(--ease-default, ease),
+    box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease),
+    background var(--duration-fast, 0.15s) var(--ease-default, ease),
+    color var(--duration-fast, 0.15s) var(--ease-default, ease);
+}
+
+.settings-segment-btn[data-active='true'] {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.settings-segment-btn:hover:not(:disabled),
+.settings-segment-btn:focus-visible:not(:disabled) {
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha);
+}
+
+.settings-focus-ring {
+  transition: box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease);
+}
+
+.settings-focus-ring:hover:not(:disabled),
+.settings-focus-ring:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha);
+}
+
+.settings-delete-outline-btn .settings-delete-outline-btn__icon {
+  color: var(--color-danger);
+  transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
+}
+
+.settings-delete-outline-btn:hover:not(:disabled) .settings-delete-outline-btn__icon,
+.settings-delete-outline-btn:focus:not(:disabled) .settings-delete-outline-btn__icon {
+  color: var(--color-accent-primary);
+}
+
 .input-password-wrap:focus-within {
   outline: none;
   border-color: var(--color-primary);
@@ -213,3 +360,412 @@ label:has(> input[type='checkbox'][class*='_input_']) > span[class*='_box_']::af
   transform: rotate(45deg) !important;
   transform-origin: center center !important;
 }
+
+/* =============================================================================
+ * Shell de pantallas auth (login / registro / recuperación)
+ * Requiere variables de acento en ancestro (--color-primary, --color-primary-hover)
+ * p. ej. ThemeProvider (.theme-conatel / .theme-vivion) o tokens equivalentes en :root.
+ * ============================================================================= */
+
+.login-split-container {
+  --auth-gray-700: #5f6062;
+  --auth-gray-600: #757578;
+  --auth-gray-400: #bcc0c3;
+  --login-brand-bg-from: #fcfdfe;
+  --login-brand-bg-via: #f6f8fb;
+  --login-brand-bg-to: #eef1f5;
+  --login-brand-veil: rgba(95, 96, 98, 0.038);
+  --login-brand-wash: rgba(255, 255, 255, 0.85);
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+.login-brand-side {
+  flex: 1;
+  background:
+    radial-gradient(ellipse 85% 65% at 12% 8%, var(--login-brand-wash) 0%, transparent 52%),
+    radial-gradient(ellipse 70% 55% at 92% 88%, rgba(255, 255, 255, 0.5) 0%, transparent 48%),
+    linear-gradient(
+      152deg,
+      var(--login-brand-bg-from) 0%,
+      var(--login-brand-bg-via) 42%,
+      var(--login-brand-bg-to) 100%
+    );
+  color: var(--auth-gray-700);
+  border-right: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-brand-side--compact {
+  padding: 3rem 2.5rem;
+}
+
+.login-split-container.auth-split--brand-end {
+  flex-direction: row;
+}
+
+.login-split-container.auth-split--brand-end .login-form-side {
+  border-left: none;
+  border-right: 1px solid var(--auth-gray-400);
+}
+
+.login-split-container.auth-split--brand-end .login-brand-side {
+  flex: 1;
+}
+
+.login-brand-side::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: radial-gradient(
+    circle at 1px 1px,
+    var(--login-brand-veil) 1px,
+    transparent 0
+  );
+  background-size: 22px 22px;
+}
+
+.login-brand-logo-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.35rem 0;
+  margin-bottom: 1.5rem;
+  max-width: 100%;
+  background: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  filter: drop-shadow(0 3px 14px rgba(95, 96, 98, 0.09));
+}
+
+.auth-brand-tagline {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  color: var(--auth-gray-600);
+}
+
+.auth-brand-tagline strong {
+  color: var(--auth-gray-700);
+  font-weight: 600;
+}
+
+.brand-content--compact {
+  max-width: 380px;
+  margin: 0 auto;
+}
+
+.brand-content {
+  position: relative;
+  z-index: 2;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.brand-logo-large {
+  width: 200px;
+  margin-bottom: 0;
+  display: block;
+}
+
+.brand-content p {
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  color: var(--auth-gray-600);
+  margin-bottom: 2.25rem;
+}
+
+.brand-content p strong {
+  color: var(--auth-gray-700);
+}
+
+.brand-features {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.feature-icon {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.55);
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 1px 2px rgba(95, 96, 98, 0.06),
+    0 4px 12px rgba(95, 96, 98, 0.06);
+}
+
+.login-brand-side .feature-icon svg {
+  color: var(--auth-gray-700);
+}
+
+.login-brand-side .feature-item > span:last-child {
+  color: var(--auth-gray-700);
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.login-form-side {
+  flex: 0 0 480px;
+  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem;
+  border-left: 1px solid var(--auth-gray-400);
+  box-shadow: -16px 0 48px -24px rgba(95, 96, 98, 0.1);
+  position: relative;
+  z-index: 5;
+}
+
+/* CTA: acento del tema; disabled sin apagar (estado “Verificando…”) */
+.login-split-container .btn-primary {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-primary) 92%, #ffffff) 0%,
+    var(--color-primary) 45%,
+    var(--color-primary-hover) 100%
+  );
+  color: #fff;
+  border: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  font-weight: 600;
+  border-radius: var(--radius-md, 6px);
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition:
+    background-color var(--duration-fast, 0.15s) ease,
+    transform var(--duration-fast, 0.15s) ease,
+    box-shadow var(--duration-fast, 0.15s) ease,
+    filter var(--duration-fast, 0.15s) ease;
+}
+
+.login-split-container .btn-primary:hover:not(:disabled) {
+  background: linear-gradient(
+    180deg,
+    var(--color-primary) 0%,
+    var(--color-primary-hover) 100%
+  );
+  filter: brightness(1.03);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
+}
+
+.login-split-container .btn-primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(204, 3, 46, 0.2));
+}
+
+.login-split-container .btn-primary:disabled {
+  opacity: 1;
+  cursor: wait;
+  filter: none;
+  transform: none;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
+  animation: ru-auth-submit-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes ru-auth-submit-pulse {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.08);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .login-split-container .btn-primary:disabled {
+    animation: none;
+  }
+
+  .login-split-container .btn-primary:hover:not(:disabled) {
+    transform: none;
+  }
+}
+
+.auth-text-link {
+  font-size: 0.875rem;
+  color: var(--auth-gray-600);
+  text-decoration: none;
+}
+
+.auth-text-link:hover {
+  color: var(--auth-gray-700);
+  text-decoration: underline;
+}
+
+.login-split-container .form-group > label {
+  color: var(--auth-gray-700);
+}
+
+.login-split-container .form-input,
+.login-split-container .input-password-wrap {
+  border-color: var(--auth-gray-400);
+}
+
+.login-split-container input[type='checkbox'] {
+  accent-color: var(--auth-gray-700);
+  width: 1.05rem;
+  height: 1.05rem;
+  cursor: pointer;
+}
+
+.login-remember-label {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--auth-gray-600);
+  cursor: pointer;
+}
+
+.login-header {
+  margin-bottom: 3rem;
+  text-align: center;
+}
+
+.login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-primary, var(--auth-gray-700));
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+  text-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary, var(--auth-gray-700)) 12%, transparent);
+}
+
+.login-subtitle {
+  color: var(--auth-gray-600);
+  font-weight: 500;
+}
+
+.auth-page-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: var(--auth-gray-700);
+}
+
+.auth-page-subtitle {
+  color: var(--auth-gray-600);
+  margin-bottom: 1.5rem;
+}
+
+.login-footer {
+  margin-top: 3rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--color-text-muted, var(--auth-gray-600));
+  line-height: 1.6;
+}
+
+.login-footer a {
+  color: var(--auth-gray-600);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.login-footer a:hover {
+  color: var(--auth-gray-700);
+  text-decoration: underline;
+}
+
+.login-split-container .form-group {
+  margin-bottom: var(--space-4, 1rem);
+}
+
+@media (max-width: 900px) {
+  .login-split-container {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .login-split-container .login-form-side {
+    border-left: none;
+    border-right: none;
+  }
+
+  .login-split-container:not(.auth-split--brand-end) .login-form-side {
+    border-top: 1px solid var(--auth-gray-400);
+  }
+
+  .login-split-container.auth-split--brand-end .login-form-side {
+    border-bottom: 1px solid var(--auth-gray-400);
+  }
+
+  .login-brand-side {
+    padding: var(--space-6, 1.5rem);
+    min-height: 200px;
+  }
+
+  .brand-logo-large {
+    width: 150px;
+  }
+
+  .brand-content h1 {
+    font-size: 1.5rem;
+  }
+
+  .brand-features {
+    display: none;
+  }
+
+  .login-form-side {
+    padding: var(--space-6, 1.5rem);
+  }
+}
+
+/**
+ * Toast (@conatel-sa/react-ui): paleta tipo richColors (tema light).
+ * ToastProvider hace portal a document.body, fuera del nodo con .theme-conatel / .theme-vivion:
+ * no usar ancestro .theme-* aquí. Los hashes `_toast_` / `_success_` vienen del CSS module del Toast.
+ */
+[class*='_toast_'][class*='_success_'] {
+  background-color: hsl(143, 85%, 96%) !important;
+  border: 1px solid hsl(145, 92%, 91%) !important;
+  color: hsl(140, 100%, 27%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}
+
+[class*='_toast_'][class*='_warning_'] {
+  background-color: hsl(49, 100%, 97%) !important;
+  border: 1px solid hsl(49, 91%, 91%) !important;
+  color: hsl(31, 92%, 45%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}
+
+[class*='_toast_'][class*='_error_'] {
+  background-color: hsl(359, 100%, 97%) !important;
+  border: 1px solid hsl(359, 100%, 94%) !important;
+  color: hsl(360, 100%, 45%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}
+
+[class*='_toast_'][class*='_info_'] {
+  background-color: hsl(208, 100%, 97%) !important;
+  border: 1px solid hsl(221, 91%, 91%) !important;
+  color: hsl(210, 92%, 45%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conatel-sa/react-ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",