zerochat 7.3.0__py3-none-any.whl

zerochat_runtime/assets/css/theme-overrides.css

@@ -0,0 +1,555 @@
+/* ==========================================================================
+   Selector Segmentado de Tema y Ajustes Específicos para Modo Oscuro
+   ========================================================================== */
+.theme-switcher-group,
+.lang-switcher-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem;
+  background-color: var(--bg-app);
+  padding: 0.25rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+}
+
+.btn-theme-toggle,
+.btn-lang-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.85rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.btn-theme-toggle:hover,
+.btn-lang-toggle:hover {
+  color: var(--text-main);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+[data-theme="dark"] .btn-theme-toggle:hover,
+[data-theme="dark"] .btn-lang-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.btn-theme-toggle.active,
+.btn-lang-toggle.active {
+  background-color: var(--bg-surface);
+  color: var(--primary);
+  border-color: var(--border-color);
+  font-weight: 600;
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="dark"] .btn-theme-toggle.active,
+[data-theme="dark"] .btn-lang-toggle.active {
+  background-color: #1e293b;
+  color: #60a5fa;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .chat-input-container {
+  background-color: var(--bg-surface);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .chat-input-container:focus-within {
+  border-color: var(--input-border-focus);
+  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(var(--primary-rgb), 0.2);
+}
+
+[data-theme="dark"] .btn-reasoning {
+  border-color: var(--border-color);
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .btn-reasoning:hover {
+  background-color: #1e293b;
+  color: var(--text-main);
+  border-color: #475569;
+}
+
+[data-theme="dark"] .btn-reasoning.active-on {
+  border-color: #6366f1;
+  background-color: rgba(99, 102, 241, 0.2);
+  color: #a5b4fc;
+}
+
+[data-theme="dark"] .btn-reasoning.active-low {
+  border-color: #22c55e;
+  background-color: rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}
+
+[data-theme="dark"] .btn-reasoning.active-medium {
+  border-color: #22c55e;
+  background-color: rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}
+
+[data-theme="dark"] .btn-reasoning.active-high {
+  border-color: #eab308;
+  background-color: rgba(234, 179, 8, 0.2);
+  color: #fef08a;
+}
+
+[data-theme="dark"] .btn-reasoning.active-xhigh {
+  border-color: #f43f5e;
+  background-color: rgba(244, 63, 94, 0.2);
+  color: #fda4af;
+}
+
+[data-theme="dark"] .reasoning-menu {
+  background-color: var(--bg-surface);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .reasoning-menu-header {
+  background-color: #0b1120;
+  border-color: var(--border-color);
+  color: var(--text-main);
+}
+
+[data-theme="dark"] .reasoning-menu-footer {
+  background-color: #0b1120;
+  border-color: var(--border-color);
+}
+
+
+
+[data-theme="dark"] .reasoning-option:hover {
+  background-color: #1e293b;
+}
+
+[data-theme="dark"] .reasoning-option.active {
+  background-color: rgba(255, 255, 255, 0.07);
+  color: var(--text-main);
+  border: none;
+}
+
+[data-theme="dark"] .thought-block {
+  background-color: rgba(11, 17, 32, 0.6);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .thought-summary {
+  background-color: #182238;
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .thought-summary:hover {
+  background-color: #1e2d4a;
+  color: var(--text-main);
+}
+
+[data-theme="dark"] .thought-content {
+  border-color: var(--border-color);
+  color: #cbd5e1;
+}
+
+[data-theme="dark"] .file-chip {
+  background-color: var(--bg-surface);
+  border-color: var(--border-color);
+  color: var(--text-main);
+}
+
+
+[data-theme="dark"] .btn-secondary {
+  background-color: #182238;
+  border-color: var(--border-color);
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .btn-secondary:hover {
+  background-color: #1e2d4a;
+  color: var(--text-main);
+  border-color: #475569;
+}
+
+[data-theme="dark"] .cookie-notice {
+  background-color: rgba(30, 58, 138, 0.25);
+  border-color: #1e40af;
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .btn-close:hover {
+  background-color: #1e293b;
+  color: var(--text-main);
+}
+
+[data-theme="dark"] .label-hint code {
+  background-color: #0b1120;
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .tool-execution-card {
+  border-color: #4f46e5;
+  background-color: #0f172a;
+}
+
+[data-theme="dark"] .tool-card-result {
+  background-color: #090d16;
+  border-top-color: var(--border-color);
+  color: #e2e8f0;
+}
+
+[data-theme="dark"] .tool-result-label {
+  color: #94a3b8;
+}
+
+/* Estadísticas de respuesta en Modo Oscuro — usando tokens semánticos */
+[data-theme="dark"] .message-stats {
+  background-color: var(--bg-surface-elevated);
+  color: var(--text-secondary);
+  border-color: var(--border-color);
+}
+
+
+/* Modo Oscuro: Tarjeta de consulta web */
+[data-theme="dark"] .web-request-card {
+  border-color: #0369a1;
+  background-color: #082f49;
+}
+
+[data-theme="dark"] .web-card-section.web-request-section {
+  background-color: #0c1829;
+  border-top-color: #1e3a5f;
+}
+
+[data-theme="dark"] .web-card-section.web-response-section {
+  background-color: #091322;
+  border-top-color: #1e3a5f;
+}
+
+[data-theme="dark"] .url-badge {
+  color: #38bdf8;
+}
+
+[data-theme="dark"] .url-badge a {
+  color: #38bdf8;
+}
+
+[data-theme="dark"] .web-response-body {
+  background-color: #030712;
+  color: #f1f5f9;
+}
+
+/* Modo Oscuro: Tarjeta de búsqueda web */
+[data-theme="dark"] .web-search-card {
+  border-color: #0f766e;
+  background-color: #042f2e;
+}
+
+[data-theme="dark"] .search-card-header {
+  background: linear-gradient(135deg, #0f766e, #115e59);
+}
+
+[data-theme="dark"] .search-query-section,
+[data-theme="dark"] .search-results-section {
+  background-color: #071f1e;
+  border-top-color: #115e59;
+}
+
+[data-theme="dark"] .web-search-card .query-badge {
+  color: #2dd4bf;
+}
+
+[data-theme="dark"] .search-result-item {
+  background-color: #0d2827;
+  border-color: #134e4a;
+}
+
+[data-theme="dark"] .search-result-item a {
+  color: #2dd4bf;
+}
+
+[data-theme="dark"] .search-result-snippet {
+  color: #99f6e4;
+}
+
+[data-theme="dark"] .setting-toggle-card {
+  background-color: #0c1829;
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .setting-toggle-card:hover {
+  border-color: #334155;
+}
+
+[data-theme="dark"] .toggle-card-desc code {
+  background-color: #1e293b;
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .slider {
+  background-color: #334155;
+}
+
+[data-theme="dark"] input:checked + .slider {
+  background-color: #3b82f6;
+}
+
+/* Modo Oscuro: Botón Query del Servidor y Estado */
+[data-theme="dark"] .btn-query-server {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: #60a5fa;
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+[data-theme="dark"] .btn-query-server:hover {
+  background-color: #2563eb;
+  color: #ffffff;
+  border-color: #3b82f6;
+}
+
+[data-theme="dark"] .server-query-status.status-loading {
+  background-color: #0c1f38;
+  border-color: #0369a1;
+  color: #38bdf8;
+}
+
+[data-theme="dark"] .server-query-status.status-success {
+  background-color: #06281e;
+  border-color: #059669;
+  color: #34d399;
+}
+
+[data-theme="dark"] .server-query-status.status-error {
+  background-color: #311317;
+  border-color: #b91c1c;
+  color: #f87171;
+}
+
+/* Modo Oscuro: Flecha SVG para Selects y Combos */
+[data-theme="dark"] .combobox-select-helper,
+[data-theme="dark"] select.form-input,
+[data-theme="dark"] .form-field select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+/* Modo Oscuro: Menú de Razonamiento */
+[data-theme="dark"] .reasoning-model-badge {
+  background: rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .reasoning-option.recommended::after {
+  background-color: rgba(52, 211, 153, 0.2);
+  color: #34d399;
+}
+
+/* ========================================================================== */
+/* Correcciones de Contraste para Modo Oscuro                                */
+/* ========================================================================== */
+
+/* 1. Botón de toggle de visibilidad en campo API Key (ALTA PRIORIDAD) */
+[data-theme="dark"] .btn-toggle-visibility {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-toggle-visibility:hover {
+  color: var(--text-main);
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* 2. Iconos en botones de la Sidebar (MEDIA PRIORIDAD) */
+[data-theme="dark"] .btn-sidebar-icon,
+[data-theme="dark"] .btn-sidebar-close {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-sidebar-icon:hover,
+[data-theme="dark"] .btn-sidebar-close:hover {
+  color: var(--text-main);
+}
+
+/* 3. Iconos en botones del Header (VERIFICACIÓN) */
+[data-theme="dark"] .btn-header-icon {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-header-icon:hover {
+  color: var(--text-main);
+}
+
+/* 4. Icono de búsqueda en Sidebar (MEDIA PRIORIDAD) */
+[data-theme="dark"] .sidebar-search-icon {
+  color: var(--text-secondary);
+}
+
+/* 5. Botones del compositor - chips (VERIFICACIÓN) */
+[data-theme="dark"] .btn-composer-chip {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-composer-chip:hover {
+  color: var(--text-main);
+}
+
+[data-theme="dark"] .btn-composer-icon-btn {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-composer-icon-btn:hover {
+  color: var(--text-main);
+}
+
+/* 6. Botón de adjuntar archivos */
+[data-theme="dark"] .btn-attach {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-attach:hover {
+  color: var(--text-main);
+}
+
+/* 7. Mejora de contraste para elementos críticos con text-muted */
+[data-theme="dark"] .file-chip-size {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .file-chip-remove {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .file-chip-remove:hover {
+  background-color: var(--danger);
+  color: white;
+}
+
+/* 8. Botones de acciones en mensajes (copiar, regenerar, eliminar) */
+[data-theme="dark"] .btn-msg-action {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-msg-action:hover {
+  color: var(--text-main);
+}
+
+/* 9. Mejora de contraste en thought-summary */
+[data-theme="dark"] .thought-summary {
+  color: var(--text-secondary);
+}
+
+/* 10. Botones de profile header */
+[data-theme="dark"] .btn-profile-header-icon {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-profile-header-icon:hover {
+  color: var(--text-main);
+}
+
+/* 11. Botones del contexto hub y telemetría */
+[data-theme="dark"] .btn-close-popover {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-close-popover:hover {
+  color: var(--text-main);
+}
+
+/* 12. Iconos en settings items */
+[data-theme="dark"] .settings-item-icon {
+  color: var(--text-secondary);
+}
+
+/* 13. Chevron icons en settings */
+[data-theme="dark"] .settings-item-chevron {
+  color: var(--text-muted);
+}
+
+/* 14. Mejora del botón de cerrar reasoning menu */
+[data-theme="dark"] .btn-reasoning-close {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-reasoning-close:hover {
+  color: var(--text-main);
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* 15. Botón de envío del compositor */
+[data-theme="dark"] .btn-send {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-send:hover {
+  color: var(--text-main);
+}
+
+/* 16. Mejora general para iconos en inputs y campos de formulario */
+[data-theme="dark"] .form-field .ui-icon {
+  color: var(--text-secondary);
+}
+
+/* 17. Botones del panel de debug */
+[data-theme="dark"] .btn-debug-toggle {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-debug-action {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-debug-action:hover {
+  color: var(--text-main);
+}
+
+/* 18. Status indicator en debug con mejor contraste */
+[data-theme="dark"] .debug-status-indicator.idle {
+  color: var(--text-secondary);
+}
+
+/* 19. Botones de cierre genéricos */
+[data-theme="dark"] .btn-close-panel {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-close-panel:hover {
+  color: var(--text-main);
+}
+
+/* 20. Mejora de labels y hints en formularios */
+[data-theme="dark"] .label-hint {
+  color: var(--text-secondary);
+}
+
+/* 21. Placeholder en inputs para mejor legibilidad */
+[data-theme="dark"] input::placeholder,
+[data-theme="dark"] textarea::placeholder {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+/* 22. Enlaces en hints y ayuda */
+[data-theme="dark"] .label-hint a {
+  color: var(--primary);
+}
+
+[data-theme="dark"] .label-hint a:hover {
+  color: var(--primary-hover);
+}
+
+/* 23. Mejora del icono en generation status */
+[data-theme="dark"] .generation-status-icon {
+  color: var(--text-secondary);
+}
+
+/* 24. Botones de la welcome screen */
+[data-theme="dark"] .welcome-help-link {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .welcome-help-link:hover {
+  color: var(--primary);
+}

zerochat_runtime/assets/css/tokens.css

@@ -0,0 +1,165 @@
+/* ==========================================================================
+   ZeroChat Design Tokens - Variables Semánticas y Paleta de Diseño
+   ========================================================================== */
+:root {
+  /* Paleta Base y Acentos */
+  --primary: #2563eb;
+  --primary-color: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-light: #eff6ff;
+  --primary-rgb: 37, 99, 235;
+
+  /* Fondos y Superficies (Modo Claro) */
+  --bg-app: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-surface-elevated: #ffffff;
+  --bg-surface-subtle: #f1f5f9;
+  --bg-assistant-bubble: #ffffff;
+  --bg-user-bubble: #2563eb;
+  --bg-hover: #f1f5f9;
+  --bg-main: #f8fafc;
+
+  /* Tipografía y Textos */
+  --text-main: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #64748b;
+  --text-user: #ffffff;
+
+  /* Bordes y Separadores */
+  --border-color: #e2e8f0;
+  --border-subtle: #edf2f7;
+  --border-focus: #2563eb;
+  --border-hover: #cbd5e1;
+
+  /* Controles de Formulario (Inputs y Combos) */
+  --input-bg: var(--bg-surface);
+  --input-bg-subtle: var(--bg-surface-subtle);
+  --input-border: var(--border-color);
+  --input-border-hover: var(--border-hover);
+  --input-border-focus: var(--border-focus);
+  --input-focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
+
+  /* Estados de Notificación / Acción */
+  --danger: #ef4444;
+  --danger-hover: #dc2626;
+  --danger-light: #fef2f2;
+  --danger-subtle: rgba(239, 68, 68, 0.12);
+  --success: #10b981;
+  --success-light: #f0fdf4;
+  --warning: #f59e0b;
+  --warning-light: #fffbeb;
+
+  /* Transiciones */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Scrollbars */
+  --scrollbar-thumb: rgba(148, 163, 184, 0.4);
+  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.7);
+
+  /* Código y Sintaxis */
+  --code-bg: #f1f5f9;
+  --code-text: #0f172a;
+
+  /* Sombras y Elevación */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-composer: 0 4px 20px -2px rgba(0, 0, 0, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
+
+  /* Radios de Curvatura */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+
+  /* Tipografía Modular */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Capas Z-Index */
+  --z-base: 1;
+  --z-header: 100;
+  --z-sidebar: 110;
+  --z-modal-backdrop: 200;
+  --z-modal: 210;
+  --z-toast: 300;
+
+  /* Viewport y Layout */
+  --header-height: 3.5rem;
+  --max-content-width: 68rem;
+  --app-height: 100dvh;
+
+  /* Tokens para glassmorphism (rgba sobre variables) */
+  --bg-surface-rgb: 255, 255, 255;
+  --header-bg-alpha: 0.82;
+}
+
+/* ==========================================================================
+   Modo Oscuro (Dark Theme Tokens)
+   ========================================================================== */
+[data-theme="dark"] {
+  --primary: #3b82f6;
+  --primary-color: #3b82f6;
+  --primary-hover: #60a5fa;
+  --primary-light: rgba(59, 130, 246, 0.18);
+  --primary-rgb: 59, 130, 246;
+
+  --bg-app: #090d16;
+  --bg-surface: #131b2e;
+  --bg-surface-elevated: #1a243b;
+  --bg-surface-subtle: #182238;
+  --bg-assistant-bubble: #182238;
+  --bg-user-bubble: #2563eb;
+  --bg-hover: #1e293b;
+  --bg-main: #090d16;
+
+  --text-user: #ffffff;
+  --text-main: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+
+  --border-color: #27354f;
+  --border-subtle: #1e293b;
+  --border-focus: #60a5fa;
+  --border-hover: #3b4d6b;
+
+  /* Controles de Formulario Modo Oscuro */
+  --input-bg: #0b1120;
+  --input-bg-subtle: #182238;
+  --input-border: var(--border-color);
+  --input-border-hover: var(--border-hover);
+  --input-border-focus: var(--border-focus);
+  --input-focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
+
+  --danger: #f87171;
+  --danger-hover: #ef4444;
+  --danger-light: rgba(248, 113, 113, 0.15);
+  --danger-subtle: rgba(248, 113, 113, 0.18);
+  --success: #34d399;
+  --success-light: rgba(52, 211, 153, 0.15);
+  --warning: #fbbf24;
+  --warning-light: rgba(251, 191, 36, 0.15);
+
+  --scrollbar-thumb: rgba(100, 116, 139, 0.4);
+  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.7);
+
+  --code-bg: #0b1120;
+  --code-text: #f8fafc;
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.55);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.65), 0 8px 10px -6px rgb(0 0 0 / 0.55);
+  --shadow-composer: 0 4px 20px -2px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.35);
+
+  /* Tokens para glassmorphism modo oscuro */
+  --bg-surface-rgb: 19, 27, 46;   /* #131b2e descompuesto */
+  --header-bg-alpha: 0.85;
+}