/* Nexfy Backoffice — design próprio: sidebar navy + conteúdo claro, denso, Inter. */
:root {
  --bo-side-w: 240px; --bo-top-h: 56px;
  --bo-navy: #0f172a; --bo-navy-2: #111c34; --bo-ink: #0b1220; --bo-muted: #64748b; --bo-border: #e5e7eb; --bo-bg: #f5f6fa; --bo-surface: #fff;
  --bo-accent: #5056ff; --bo-accent-2: #7b80ff; --bo-green: #16a34a; --bo-amber: #f59e0b; --bo-red: #dc2626;
  --bo-r: 12px; --bo-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.05);
  --font: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html, body { height: 100%; }
body.bo { margin: 0; background: var(--bo-bg); color: var(--bo-ink); font-family: var(--font); font-size: .875rem; }
.bo-side { position: fixed; inset: 0 auto 0 0; width: var(--bo-side-w); background: linear-gradient(180deg, var(--bo-navy) 0%, var(--bo-navy-2) 100%); color: #cbd5e1; display: flex; flex-direction: column; z-index: 50; transition: transform .2s ease; }
.bo-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; text-decoration: none; }
.bo-brand small, .bo-login-brand small, .bo-me small { display: block; font-size: .7rem; color: #94a3b8; font-weight: 500; }
.bo-brand b, .bo-login-brand b { font-size: 1.05rem; letter-spacing: -.01em; }
.bo-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--bo-accent), var(--bo-accent-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(80,86,255,.35); flex: 0 0 auto; }
.bo-nav { list-style: none; margin: 6px 0 0; padding: 0 10px; flex: 1 1 auto; overflow: auto; }
.bo-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: #cbd5e1; text-decoration: none; font-weight: 500; font-size: .84rem; margin-bottom: 2px; }
.bo-nav a i { width: 18px; text-align: center; font-size: 1rem; opacity: .9; }
.bo-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.bo-nav a.on { background: rgba(80,86,255,.22); color: #fff; box-shadow: inset 2px 0 0 var(--bo-accent-2); }
.bo-count { margin-left: auto; background: var(--bo-amber); color: #1f1300; font-style: normal; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.bo-side-foot { display: flex; align-items: center; gap: 6px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.bo-me { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.bo-me b { font-size: .82rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-avatar { width: 32px; height: 32px; border-radius: 50%; background: #1e293b; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex: 0 0 auto; }
.bo-logout { color: #94a3b8; padding: 6px 8px; border-radius: 8px; }
.bo-logout:hover { color: #fff; background: rgba(255,255,255,.06); }
.bo-main { margin-left: var(--bo-side-w); min-height: 100vh; display: flex; flex-direction: column; }
.bo-top { height: var(--bo-top-h); display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--bo-surface); border-bottom: 1px solid var(--bo-border); position: sticky; top: 0; z-index: 40; }
.bo-top-title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.bo-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bo-search input { width: 300px; }
.bo-burger { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--bo-ink); }
.bo-backdrop { display: none; position: fixed; inset: 0; background: rgba(2,6,23,.45); z-index: 45; }
.bo-content { padding: 20px; flex: 1 1 auto; }
.bo-card { background: var(--bo-surface); border: 1px solid var(--bo-border); border-radius: var(--bo-r); padding: 16px; box-shadow: var(--bo-shadow); margin-bottom: 16px; }
.bo-card.p-0 { padding: 0; }
.bo-card h5, .bo-card h6 { letter-spacing: -.01em; }
.bo-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bo-muted); font-weight: 700; margin-bottom: 10px; }
.bo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bo-kpi { background: var(--bo-surface); border: 1px solid var(--bo-border); border-radius: var(--bo-r); padding: 14px 16px; box-shadow: var(--bo-shadow); position: relative; overflow: hidden; }
.bo-kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bo-accent); opacity: .85; }
.bo-kpi.ok::after { background: var(--bo-green); } .bo-kpi.warn::after { background: var(--bo-amber); } .bo-kpi.bad::after { background: var(--bo-red); } .bo-kpi.neutral::after { background: #94a3b8; }
.bo-kpi-label { font-size: .72rem; color: var(--bo-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bo-kpi-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bo-kpi-foot { font-size: .72rem; color: var(--bo-muted); margin-top: 4px; }
.bo-table { margin: 0; font-size: .82rem; }
.bo-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bo-muted); font-weight: 700; border-bottom: 1px solid var(--bo-border); background: #fafbfe; white-space: nowrap; }
.bo-table td { vertical-align: middle; }
.bo-table tr:hover td { background: #fafbff; }
.bo-badge { font-weight: 600; font-size: .7rem; letter-spacing: .01em; }
.bo-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.bo-filters .form-control, .bo-filters .form-select { min-width: 140px; }
.bo-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.bo-muted { color: var(--bo-muted); }
.bo-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bo-alerts .alert { padding: 8px 12px; margin-bottom: 6px; }
.bo-tabs .nav-link { font-size: .82rem; font-weight: 600; color: var(--bo-muted); }
.bo-tabs .nav-link.active { color: var(--bo-accent); }
.bo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bo-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.bo-dl dt { font-weight: 600; color: var(--bo-muted); font-size: .76rem; } .bo-dl dd { margin-bottom: 8px; }
/* preview WhatsApp */
.wa-prev { background: #e5ddd5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='1' fill='%23d6cfc6'/></svg>"); border-radius: 14px; padding: 16px; max-width: 360px; }
.wa-bubble { background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: .82rem; white-space: pre-wrap; word-break: break-word; position: relative; }
.wa-bubble .wa-h { font-weight: 700; margin-bottom: 4px; } .wa-bubble .wa-f { color: #8696a0; font-size: .72rem; margin-top: 4px; }
.wa-bubble .wa-media { height: 120px; background: #cfd8dc; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #607d8b; margin-bottom: 6px; }
.wa-btn { background: #fff; border-radius: 10px; margin-top: 4px; text-align: center; color: #00a5f4; padding: 7px; font-size: .82rem; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-var { background: #fff3bf; border-radius: 4px; padding: 0 3px; }
/* login */
body.bo-login { background: radial-gradient(1200px 600px at 10% -10%, rgba(80,86,255,.25), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(22,163,74,.18), transparent 60%), var(--bo-navy); min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: var(--font); margin: 0; padding: 16px; }
.bo-login-box { background: #fff; border-radius: 16px; padding: 28px; width: 100%; max-width: 400px; box-shadow: 0 30px 60px rgba(2,6,23,.4); }
.bo-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.bo-login-brand b { display: block; font-size: 1.1rem; }
@media (max-width: 991px) {
  .bo-side { transform: translateX(-100%); } body.menu-open .bo-side { transform: none; } body.menu-open .bo-backdrop { display: block; }
  .bo-main { margin-left: 0; } .bo-burger { display: inline-block; } .bo-search input { width: 160px; } .bo-grid-2, .bo-grid-3 { grid-template-columns: 1fr; } .bo-content { padding: 12px; }
}

/* ===== Fase 1 (2026-10-27): navegação por grupo, busca global, manual, tour, ficha 360 ===== */
.bo-nav-group { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: #64748b; font-weight: 700; padding: 12px 12px 4px; }
.bo-count.bad { background: var(--bo-red); color: #fff; }
.bo-search-btn { display: inline-flex; align-items: center; gap: 8px; background: #f1f3f9; border: 1px solid var(--bo-border); border-radius: 9px; padding: 6px 10px; color: var(--bo-muted); font-size: .8rem; min-width: 320px; cursor: text; }
.bo-search-btn span { flex: 1 1 auto; text-align: left; } .bo-search-btn kbd, .bo-palette kbd { font-size: .65rem; background: #fff; border: 1px solid var(--bo-border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--bo-muted); font-family: var(--font); }
.bo-top-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--bo-border); background: #fff; color: var(--bo-ink); font-size: 1rem; text-decoration: none; }
.bo-top-icon:hover { background: #f1f3f9; color: var(--bo-ink); } .bo-top-icon em { position: absolute; top: -6px; right: -6px; background: var(--bo-amber); color: #1f1300; font-style: normal; font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 999px; } .bo-top-icon.bad em { background: var(--bo-red); color: #fff; } .bo-top-icon.warn em { background: var(--bo-amber); }
.bo-avatar-sm, .bo-avatar-lg { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex: 0 0 auto; letter-spacing: .02em; }
.bo-avatar-sm { width: 28px; height: 28px; font-size: .68rem; } .bo-avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; box-shadow: var(--bo-shadow); }
.bo-tag { display: inline-block; background: #eef0ff; color: #3b40c8; border-radius: 999px; padding: 1px 8px; font-size: .68rem; font-weight: 600; margin: 1px 2px 1px 0; }
.bo-nota { border-left: 3px solid var(--bo-border); padding: 8px 10px; margin-bottom: 8px; background: #fafbfe; border-radius: 0 8px 8px 0; } .bo-nota.fixada { border-left-color: var(--bo-amber); background: #fffbeb; }
.bo-quick .btn { white-space: nowrap; }
.bo-sla { font-size: .74rem; font-weight: 600; white-space: nowrap; } .bo-sla-estourado { animation: bo-pulse 1.6s infinite; } @keyframes bo-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.bo-diff { margin: 4px 0 0; font-size: .74rem; display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; } .bo-diff dt { color: var(--bo-muted); font-weight: 600; } .bo-diff dd { margin: 0; } .bo-diff del { color: #b91c1c; background: #fee2e2; text-decoration: line-through; border-radius: 3px; padding: 0 3px; } .bo-diff ins { color: #166534; background: #dcfce7; text-decoration: none; border-radius: 3px; padding: 0 3px; }
.bo-timeline { position: relative; } .bo-tl-item { position: relative; padding: 8px 0 8px 22px; border-left: 2px solid var(--bo-border); margin-left: 6px; } .bo-tl-dot { position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--bo-accent); border: 2px solid #fff; } .bo-tl-dot.cli { background: #94a3b8; }
.bo-preview { background: #fafbfe; border: 1px dashed var(--bo-border); border-radius: 10px; padding: 10px 12px; } #comPreviewBody { white-space: pre-wrap; }
.bo-perms td, .bo-matriz td { padding-top: 4px; padding-bottom: 4px; }
.bo-help-body h4, .bo-help-body h5 { font-size: .95rem; margin-top: 12px; } .bo-help-body code, .bo-help-body kbd { font-size: .75rem; } .bo-help-body ul, .bo-help-body ol { padding-left: 18px; }
/* palette */
.bo-palette { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 1060; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; backdrop-filter: blur(2px); }
.bo-palette[hidden] { display: none; }
.bo-palette-box { width: 100%; max-width: 680px; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px rgba(2,6,23,.45); overflow: hidden; }
.bo-palette-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bo-border); } .bo-palette-in i { color: var(--bo-muted); } .bo-palette-in input { flex: 1 1 auto; border: 0; outline: 0; font-size: 1rem; font-family: var(--font); }
.bo-palette-res { max-height: 60vh; overflow: auto; }
.bo-palette-g { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bo-muted); font-weight: 700; padding: 10px 16px 4px; }
.bo-palette-it { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; text-decoration: none; color: var(--bo-ink); } .bo-palette-it:hover, .bo-palette-it.sel { background: #eef0ff; }
.bo-palette-it i.ic { width: 28px; height: 28px; border-radius: 8px; background: #f1f3f9; display: inline-flex; align-items: center; justify-content: center; color: var(--bo-accent); flex: 0 0 auto; }
.bo-palette-it b { font-size: .86rem; display: block; } .bo-palette-it small { color: var(--bo-muted); display: block; }
.bo-palette-it .acts { margin-left: auto; display: flex; gap: 4px; } .bo-palette-it .acts a { font-size: .7rem; border: 1px solid var(--bo-border); border-radius: 6px; padding: 2px 7px; color: var(--bo-muted); text-decoration: none; background: #fff; } .bo-palette-it .acts a:hover { color: var(--bo-accent); border-color: var(--bo-accent); }
.bo-palette-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--bo-border); font-size: .7rem; color: var(--bo-muted); flex-wrap: wrap; }
.bo-palette-empty { padding: 28px 16px; text-align: center; color: var(--bo-muted); font-size: .85rem; }
/* tour */
.bo-tour { position: fixed; inset: 0; z-index: 1070; pointer-events: none; } .bo-tour[hidden] { display: none; }
.bo-tour-box { position: absolute; width: 320px; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(2,6,23,.4); padding: 14px 16px; pointer-events: auto; border: 1px solid var(--bo-border); }
.bo-tour-step { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bo-accent); font-weight: 700; } .bo-tour-title { margin: 4px 0 4px; font-weight: 700; }
.bo-tour-hl { position: relative; z-index: 1065 !important; box-shadow: 0 0 0 4px rgba(80,86,255,.55), 0 0 0 9999px rgba(2,6,23,.55) !important; border-radius: 8px; }
/* offcanvas help */
.bo-help { width: 420px; max-width: 92vw; }
@media (max-width: 991px) { .bo-search-btn { min-width: 0; } .bo-search-btn span { display: none; } .bo-search-btn kbd { display: none; } }

/* ===== Fase 2: operações, painel diário, alertas, tickets ===== */
.bo-thread { display: flex; flex-direction: column; gap: 10px; }
.bo-msg { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--bo-border); background: #fff; max-width: 92%; }
.bo-msg.cliente { background: #f1f3f9; align-self: flex-start; border-bottom-left-radius: 4px; }
.bo-msg.nexfy { background: #eef0ff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bo-msg.interna { background: #fffbeb; border-color: #fde68a; align-self: stretch; max-width: 100%; }
#tblPainel th[data-sort] { cursor: pointer; } #tblPainel th[data-sort]:hover { color: var(--bo-accent); }
.bo-health { display: inline-flex; align-items: center; gap: 6px; }
.table-warning td, .table-danger td, .table-success td { --bs-table-bg-type: transparent; }
.bo-card.border-danger { border-color: var(--bo-red) !important; } .bo-card.border-warning { border-color: var(--bo-amber) !important; } .bo-card.border-success { border-color: var(--bo-green) !important; }

/* ================================================================ Fase 4 · CRM e pré-venda */
.bo-notif { position: relative; } .bo-notif-box { position: absolute; right: 0; top: 44px; width: 360px; max-width: calc(100vw - 24px); background: var(--bo-surface); border: 1px solid var(--bo-border); border-radius: var(--bo-r); box-shadow: 0 18px 50px rgba(11,18,32,.18); z-index: 60; overflow: hidden; }
.bo-notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--bo-border); font-size: 13px; } .bo-notif-list { max-height: 380px; overflow: auto; } .bo-notif-foot { padding: 8px 12px; border-top: 1px solid var(--bo-border); font-size: 12px; text-align: center; }
.bo-notif-it { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f1f3fa; font-size: 13px; text-decoration: none; color: inherit; } .bo-notif-it:hover { background: #f6f7fb; } .bo-notif-it i { font-size: 16px; } .bo-notif-it.danger i { color: var(--bo-red); } .bo-notif-it.warning i { color: var(--bo-amber); } .bo-notif-it.success i { color: var(--bo-green); } .bo-notif-it small { display: block; color: var(--bo-muted); }
.bo-temp { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .bo-temp.quente { background: #fee2e2; color: #991b1b; } .bo-temp.morno { background: #fef3c7; color: #92400e; } .bo-temp.frio { background: #e0e7ff; color: #3730a3; }
.bo-score { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 8px; font-weight: 800; font-size: 12px; background: #eef0ff; color: #3730a3; } .bo-score.q { background: #fee2e2; color: #991b1b; } .bo-score.m { background: #fef3c7; color: #92400e; }
.bo-sem { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .bo-sem.verde { background: var(--bo-green); } .bo-sem.amarelo { background: var(--bo-amber); } .bo-sem.vermelho { background: var(--bo-red); }
.bo-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; } .bo-kcol { flex: 0 0 270px; background: #f3f4f9; border-radius: var(--bo-r); border: 1px solid var(--bo-border); min-height: 240px; display: flex; flex-direction: column; } .bo-kcol.over { outline: 2px dashed var(--bo-accent); }
.bo-khead { padding: 10px 12px; border-bottom: 1px solid var(--bo-border); border-top: 3px solid var(--bo-accent); border-radius: var(--bo-r) var(--bo-r) 0 0; background: #fff; } .bo-khead b { font-size: 13px; } .bo-khead small { display: block; color: var(--bo-muted); font-size: 11px; } .bo-kbody { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bo-kcard { background: #fff; border: 1px solid var(--bo-border); border-radius: 10px; padding: 9px 10px; font-size: 12.5px; cursor: grab; box-shadow: var(--bo-shadow); position: relative; } .bo-kcard.dragging { opacity: .45; } .bo-kcard .t { font-weight: 700; display: block; color: inherit; text-decoration: none; margin-bottom: 3px; } .bo-kcard .m { color: var(--bo-muted); font-size: 11.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .bo-kcard.alerta { border-left: 3px solid var(--bo-red); } .bo-kcard.atencao { border-left: 3px solid var(--bo-amber); }
.bo-tl { position: relative; padding-left: 26px; } .bo-tl::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--bo-border); } .bo-tli { position: relative; margin-bottom: 12px; font-size: 13px; } .bo-tli::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #c7cbe3; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--bo-border); } .bo-tli.entrada::before { background: var(--bo-green); } .bo-tli.saida::before { background: var(--bo-accent); } .bo-tli.pend::before { background: var(--bo-amber); } .bo-tli .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bo-tli .d { white-space: pre-wrap; color: #334155; background: #f8f9fc; border-radius: 8px; padding: 6px 9px; margin-top: 4px; font-size: 12.5px; }
.bo-inbox { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .bo-inbox { grid-template-columns: 1fr; } } .bo-task { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f1f3fa; font-size: 13px; } .bo-task:last-child { border-bottom: 0; } .bo-task .ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef0ff; color: var(--bo-accent); flex: 0 0 28px; } .bo-task.late .ic { background: #fee2e2; color: var(--bo-red); } .bo-task .x { margin-left: auto; white-space: nowrap; }
.bo-foco { position: fixed; inset: 0; background: rgba(11,18,32,.6); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; } .bo-foco-box { background: #fff; border-radius: 18px; max-width: 720px; width: 100%; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.bo-slots { display: flex; flex-wrap: wrap; gap: 6px; } .bo-slot { border: 1px solid var(--bo-border); border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer; background: #fff; } .bo-slot.on, .bo-slot:hover { background: var(--bo-accent); color: #fff; border-color: var(--bo-accent); }
.bo-agenda { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } @media (max-width: 900px) { .bo-agenda { grid-template-columns: 1fr; } } .bo-aday { background: var(--bo-surface); border: 1px solid var(--bo-border); border-radius: var(--bo-r); min-height: 180px; padding: 8px; } .bo-aday.hoje { border-color: var(--bo-accent); } .bo-aday.ausente { background: #fff7ed; } .bo-aday h6 { font-size: 12px; margin: 0 0 6px; color: var(--bo-muted); } .bo-aev { display: block; font-size: 12px; border-left: 3px solid var(--bo-accent); background: #f6f7fb; border-radius: 6px; padding: 4px 7px; margin-bottom: 5px; text-decoration: none; color: inherit; } .bo-aev.realizada { border-color: var(--bo-green); } .bo-aev.no_show, .bo-aev.cancelada { border-color: var(--bo-red); opacity: .7; } .bo-aev.tarefa { border-color: var(--bo-amber); }
.bo-dialer { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } @media (max-width: 1000px) { .bo-dialer { grid-template-columns: 1fr; } } .bo-dial-num { font-size: 26px; font-weight: 800; letter-spacing: .02em; } .bo-timer { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; }
.bo-funil { display: flex; flex-direction: column; gap: 6px; } .bo-funil .st { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .bo-funil .bar { height: 22px; background: linear-gradient(90deg, var(--bo-accent), #8b8fff); border-radius: 6px; color: #fff; font-size: 11px; display: flex; align-items: center; padding-left: 8px; min-width: 40px; }
.bo-telao { background: #0b1220; color: #fff; min-height: 100vh; padding: 24px; font-family: Inter, "Segoe UI", sans-serif; } .bo-telao h1 { font-weight: 800; letter-spacing: -.02em; } .bo-telao .big { font-size: 46px; font-weight: 800; line-height: 1; } .bo-telao .card { background: #141b2d; border: 1px solid #243049; border-radius: 16px; padding: 18px; color: #fff; } .bo-telao .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #8d96b3; } .bo-telao .rank { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #243049; } .bo-telao .rank .pos { width: 32px; height: 32px; border-radius: 50%; background: #5056ff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; } .bo-telao .bar { height: 10px; background: #243049; border-radius: 6px; overflow: hidden; } .bo-telao .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5056ff, #20c997); }
.bo-prop-itens td input { min-width: 70px; } .bo-margem.bad { color: var(--bo-red); font-weight: 700; } .bo-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--bo-border); font-size: 12px; margin: 2px; background: #fff; } .bo-chip.on { background: var(--bo-accent); color: #fff; border-color: var(--bo-accent); }
.bo-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 4px 0; } .bo-playbook { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 13px; } .bo-playbook p { margin: 0 0 6px; }
.bo-wa-thread { max-height: 460px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #efe7dd; border-radius: 12px; } .bo-wa-msg { max-width: 78%; padding: 7px 10px; border-radius: 10px; font-size: 13px; background: #fff; align-self: flex-start; white-space: pre-wrap; } .bo-wa-msg.out { background: #d9fdd3; align-self: flex-end; } .bo-wa-msg small { display: block; color: #6c7294; font-size: 10px; text-align: right; }
.bo-roi { background: linear-gradient(135deg, #eef0ff, #f6fffa); border-radius: 12px; padding: 12px 14px; }