feat(pos): entrada por voz en chatbot — Web Speech API es-MX

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pos/static/css/chat.css

@@ -268,6 +268,66 @@
 .chat-send-btn:hover { background: var(--color-primary-hover, #e5952f); }
 .chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
+/* ─── Mic Button (Voice Input) ─── */
+
+.chat-mic-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-base);
+  color: var(--color-text-secondary);
+  font-size: 1.1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--duration-fast) var(--ease-in-out),
+              color var(--duration-fast) var(--ease-in-out),
+              border-color var(--duration-fast) var(--ease-in-out);
+}
+
+.chat-mic-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.chat-mic-btn.listening {
+  background: #f85149;
+  border-color: #f85149;
+  color: #fff;
+  animation: micPulse 1.4s infinite;
+}
+
+@keyframes micPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.4); }
+  50% { box-shadow: 0 0 0 10px rgba(248, 81, 73, 0); }
+}
+
+/* ─── Voice Toast ─── */
+
+.chat-voice-toast {
+  position: fixed;
+  bottom: 160px;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px);
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 8px 18px;
+  border-radius: var(--radius-md, 8px);
+  font-size: 0.85rem;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s, transform 0.3s;
+  pointer-events: none;
+}
+
+.chat-voice-toast.visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
 /* ─── Vehicle Info Banner ─── */
 
 .chat-vehicle-banner {