html { font-size: 15px; position: relative; min-height: 100%; }
body { background: #f4f6f8; }

/* Barra superior */
.navbar.bg-success { background: linear-gradient(90deg, #084c3c 0%, #0b6b53 100%) !important; box-shadow: 0 2px 10px rgba(8, 76, 60, .25); }
.navbar .nav-link { margin: 0 .1rem; padding: .4rem .95rem; border-radius: 999px; font-weight: 500; transition: background .15s, color .15s; }
.navbar .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.navbar .nav-link.active { background: rgba(255, 255, 255, .18); color: #fff; }

.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #adb5bd; flex: none; }
.status-dot.ok { background: #198754; }
.status-dot.wait { background: #ffc107; }
.status-dot.bad { background: #dc3545; }

.qr-box { width: 264px; height: 264px; padding: 12px; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; }
.qr-box img { width: 100%; height: 100%; image-rendering: pixelated; }

.card.stat { color: inherit; transition: box-shadow .15s; }
.card.stat:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.08) !important; }

.chat { max-height: 60vh; overflow-y: auto; background: #efeae2; border-radius: .5rem; padding: 1rem; }
.bubble { max-width: 80%; padding: .5rem .75rem; border-radius: .5rem; margin-bottom: .5rem; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.bubble.in { background: #fff; margin-right: auto; }
.bubble.out { background: #d9fdd3; margin-left: auto; }
.bubble.agent { background: #cfe2ff; margin-left: auto; }
.bubble .meta { font-size: .75rem; color: #6c757d; margin-top: .25rem; text-align: right; }