consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pos): chatbot — mover boton arriba del carrito, fondo opaco, variables CSS

Browse Source 
- FAB movido a bottom:140px (arriba del carrito)
- Panel a bottom:200px
- Fondo usa --color-bg-elevated (opaco, no transparente)
- Bubbles usan --color-surface-2 con fallback
- Variables CSS inexistentes reemplazadas con equivalentes de tokens.css

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-02 07:33:34 +00:00
parent 230407b750
commit 9908c045c9
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
pos/static/css/chat.css
View File

@@ -7,7 +7,7 @@
.chat-fab { .chat-fab {
position: fixed; position: fixed;
bottom: 72px; /* above F-keys footer */ bottom: 140px; /* above cart FAB and F-keys footer */
right: var(--space-5); right: var(--space-5);
z-index: 8000; z-index: 8000;
width: 52px; width: 52px;
@@ -28,7 +28,7 @@
.chat-fab:hover { .chat-fab:hover {
transform: scale(1.08); transform: scale(1.08);
background: var(--color-accent-hover); background: var(--color-primary-hover, #e5952f);
} }
.chat-fab.has-unread::after { .chat-fab.has-unread::after {
@@ -46,7 +46,7 @@
.chat-panel { .chat-panel {
position: fixed; position: fixed;
bottom: 72px; bottom: 200px;
right: var(--space-5); right: var(--space-5);
z-index: 8001; z-index: 8001;
width: 400px; width: 400px;
@@ -54,7 +54,7 @@
max-height: calc(100vh - 100px); max-height: calc(100vh - 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--color-bg-surface); background: var(--color-bg-elevated);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
@@ -121,7 +121,7 @@
max-width: 85%; max-width: 85%;
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
font-size: var(--text-sm); font-size: var(--text-body-sm, 0.875rem);
line-height: 1.45; line-height: 1.45;
word-wrap: break-word; word-wrap: break-word;
} }
@@ -130,14 +130,14 @@
align-self: flex-end; align-self: flex-end;
background: var(--color-accent); background: var(--color-accent);
color: #fff; color: #fff;
border-bottom-right-radius: var(--radius-xs); border-bottom-right-radius: var(--radius-sm, 4px);
} }
.chat-msg.ai { .chat-msg.ai {
align-self: flex-start; align-self: flex-start;
background: var(--color-bg-muted); background: var(--color-surface-2, rgba(255,255,255,0.06));
color: var(--color-text-primary); color: var(--color-text-primary);
border-bottom-left-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-sm, 4px);
} }
/* ─── Typing Indicator ─── */ /* ─── Typing Indicator ─── */
@@ -147,9 +147,9 @@
display: none; display: none;
gap: 4px; gap: 4px;
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
background: var(--color-bg-muted); background: var(--color-surface-2, rgba(255,255,255,0.06));
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-sm, 4px);
} }
.chat-typing.visible { display: flex; } .chat-typing.visible { display: flex; }
@@ -179,7 +179,7 @@
} }
.chat-part-card { .chat-part-card {
background: var(--color-bg-surface); background: var(--color-bg-elevated);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
@@ -195,19 +195,19 @@
.chat-part-card .part-number { .chat-part-card .part-number {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--text-xs); font-size: var(--text-caption, 0.75rem);
color: var(--color-accent); color: var(--color-accent);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
} }
.chat-part-card .part-name { .chat-part-card .part-name {
font-size: var(--text-sm); font-size: var(--text-body-sm, 0.875rem);
color: var(--color-text-primary); color: var(--color-text-primary);
margin-top: 2px; margin-top: 2px;
} }
.chat-part-card .part-stock { .chat-part-card .part-stock {
font-size: var(--text-xs); font-size: var(--text-caption, 0.75rem);
color: var(--color-text-muted); color: var(--color-text-muted);
margin-top: 2px; margin-top: 2px;
} }
@@ -233,7 +233,7 @@
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-bg-base); background: var(--color-bg-base);
color: var(--color-text-primary); color: var(--color-text-primary);
font-size: var(--text-sm); font-size: var(--text-body-sm, 0.875rem);
font-family: var(--font-body); font-family: var(--font-body);
resize: none; resize: none;
outline: none; outline: none;
@@ -265,7 +265,7 @@
transition: background var(--duration-fast) var(--ease-in-out); transition: background var(--duration-fast) var(--ease-in-out);
} }
.chat-send-btn:hover { background: var(--color-accent-hover); } .chat-send-btn:hover { background: var(--color-primary-hover, #e5952f); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; } .chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ─── Vehicle Info Banner ─── */ /* ─── Vehicle Info Banner ─── */
@@ -277,7 +277,7 @@
border: 1px solid var(--color-accent); border: 1px solid var(--color-accent);
border-left: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: var(--text-xs); font-size: var(--text-caption, 0.75rem);
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }