:root {
  --bg: #080b28; --bg2: #12164c; --glass: rgba(27, 34, 96, .62); --line: rgba(109, 99, 255, .18); --line2: rgba(109, 99, 255, .38);
  --tx: #eef0ff; --hi: #fff; --mut: #9aa3d6; --dim: #6b73a8; --cy: #6d63ff; --vi: #8b83ff; --am: #f59e0b; --gr: #6dd58c; --rd: #f28b82;
  --panel-soft: rgba(8, 11, 40, .45); --chip: rgba(4, 9, 21, .5); --row: rgba(255, 255, 255, .025); --shadow: rgba(4, 6, 24, .45);
  --r: 22px; --gap: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx);
  font: 13px/1.4 "Plus Jakarta Sans", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(109,99,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(109,99,255,.05) 1px, transparent 1px); background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 88%); }
#bgParticles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
button, select { font: inherit; color: inherit; }
.ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1; display: inline-block; vertical-align: middle; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
b, .kpi-val, .br-n, .kb-n { font-variant-numeric: tabular-nums; }

.oc { position: relative; z-index: 1; height: calc(100vh - 20px); margin: 10px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: var(--gap); padding: 12px 14px 14px; background: var(--bg2); border-radius: 28px; box-shadow: 0 24px 60px var(--shadow); overflow: hidden; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 32px rgba(8, 10, 40, .22); }

/* Cabeçalho */
.oc-head { display: flex; align-items: center; gap: 18px; min-height: 52px; }
.oc-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.oc-brand h1 { margin: 0; font-size: 18px; letter-spacing: -.02em; font-weight: 700; color: var(--hi); }
.oc-brand h1 b { font-weight: 600; color: var(--vi); letter-spacing: 0; }
.oc-brand p { margin: 2px 0 0; color: var(--mut); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.oc-logo { width: 38px; height: 38px; position: relative; }
.oc-logo span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cy); border-right-color: rgba(56,189,248,.3); animation: spin 3.2s linear infinite; }
.oc-logo span:nth-child(2) { inset: 6px; border-top-color: var(--vi); animation-duration: 2.2s; animation-direction: reverse; }
.oc-logo span:nth-child(3) { inset: 14px; background: radial-gradient(circle, #fff 0, var(--cy) 45%, transparent 70%); border: 0; animation: breathe 2.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(.7); opacity: .6; } }
.oc-views { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); overflow-x: auto; scrollbar-width: none; margin: 0 auto; }
.oc-views button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; color: var(--mut); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: .2s; }
.oc-views button:hover { color: var(--tx); }
.oc-views button.on { background: var(--cy); color: #fff; box-shadow: 0 8px 20px rgba(109, 99, 255, .35); }
.oc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.oc-views { min-width: 0; }
.oc-src { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(4,9,21,.5); }
.oc-src button { border: 0; background: none; padding: 5px 11px; border-radius: 999px; color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: .2s; }
.oc-src button:hover { color: var(--tx); }
.oc-src button.on { color: #fff; background: color-mix(in srgb, var(--oc) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--oc) 60%, transparent) inset, 0 0 14px -4px var(--oc); }
.oc-src.tv button.on { animation: tvPulse 2s infinite; }
@keyframes tvPulse { 50% { box-shadow: 0 0 0 1px var(--oc) inset, 0 0 22px -2px var(--oc); } }
#tvBtn.on { color: #fff; border-color: var(--oc, var(--line2)); background: color-mix(in srgb, var(--oc, #38bdf8) 22%, transparent); }
#tvBtn .tv-bar { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--oc, #38bdf8); transform-origin: left; }
#tvBtn { position: relative; }
#opName:not(:empty) { margin-left: 8px; padding: 1px 8px; border-radius: 999px; color: #fff; font-weight: 700; background: color-mix(in srgb, var(--oc) 28%, transparent); border: 1px solid color-mix(in srgb, var(--oc) 55%, transparent); }
.oc-tvswitch { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(circle, rgba(2,6,18,.75), rgba(2,6,18,.35)); }
.oc-tvswitch.show { opacity: 1; }
.oc-tvswitch div { text-align: center; transform: scale(.9); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.oc-tvswitch.show div { transform: none; }
.oc-tvswitch small { display: block; color: var(--mut); font-size: 14px; letter-spacing: .4em; margin-bottom: 8px; }
.oc-tvswitch b { font-size: 64px; letter-spacing: .18em; color: #fff; text-shadow: 0 0 40px var(--oc); }
.oc-status { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mut); }
.oc-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.oc-status.online { color: #86efac; border-color: rgba(34,197,94,.35); } .oc-status.online i { background: var(--gr); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ping 1.6s infinite; }
.oc-status.demo { color: #d8b4fe; border-color: rgba(168,85,247,.4); } .oc-status.demo i { background: var(--vi); animation: ping 1.6s infinite; }
.oc-status.offline { color: #fda4af; } .oc-status.offline i { background: var(--rd); }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.oc-clock { text-align: right; line-height: 1.1; padding: 0 6px; }
.oc-clock b { font: 500 18px 'Roboto Mono', monospace; color: var(--hi); letter-spacing: .06em; }
.oc-clock small { display: block; color: var(--mut); font-size: 10.5px; text-transform: capitalize; }
.oc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--mut); cursor: pointer; text-decoration: none; font-size: 12px; font-weight: 600; transition: .2s; }
.oc-btn:hover, .oc-btn.on { color: var(--hi); border-color: var(--line2); background: rgba(109, 99, 255, .22); }

/* Filtros */
.oc-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--line); background: var(--chip); }
.seg button { border: 0; background: none; color: var(--mut); padding: 5px 11px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; }
.seg button.on { background: rgba(56,189,248,.18); color: var(--hi); }
.seg.mini button { padding: 3px 9px; font-size: 11px; }
.flt { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--chip); color: var(--mut); }
.flt .ms { font-size: 16px; }
.flt select { background: transparent; border: 0; outline: 0; color: var(--tx); font-size: 12px; max-width: 160px; cursor: pointer; }
.flt select option, .flt select optgroup { background: #0b1730; color: var(--tx); }
.flt.on { border-color: var(--cy); color: var(--cy); box-shadow: 0 0 12px -4px var(--cy); }
.flt-clear { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(244,63,94,.35); background: rgba(244,63,94,.1); color: #fda4af; cursor: pointer; font-size: 12px; font-weight: 600; }

/* KPIs */
.oc-kpis { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--gap); }
.kpi { position: relative; overflow: hidden; padding: 9px 12px 8px; min-height: 86px; display: flex; flex-direction: column; gap: 2px; border-color: color-mix(in srgb, var(--c) 22%, transparent); }
.kpi-click { cursor: pointer; }
.kpi-click:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.kpi-click.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 22px -8px var(--c); }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); opacity: .8; }
.kpi-top { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; overflow: hidden; }
.kpi-top .ms { color: var(--c); font-size: 16px; }
.kpi-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-val { font-size: clamp(18px, 1.55vw, 30px); font-weight: 800; letter-spacing: -.01em; color: var(--hi); white-space: nowrap; transition: color .4s, text-shadow .4s; }
.kpi-sub { font-size: 10.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub b { color: var(--c); }
.kpi-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%); background-size: 250% 100%; animation: shine 9s linear infinite; pointer-events: none; }
.kpi:nth-child(odd) .kpi-shine { animation-delay: -4.5s; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.kpi.up .kpi-val { color: var(--c); text-shadow: 0 0 18px var(--c); animation: settle 1.6s forwards; }
.kpi.down .kpi-val { color: #fda4af; animation: settle 1.6s forwards; }
.kpi.up { animation: kpiGlow 1.4s; }
@keyframes kpiGlow { 0% { box-shadow: 0 0 0 1px var(--c), 0 0 28px -6px var(--c); } 100% { box-shadow: none; } }
@keyframes settle { 100% { color: var(--hi); text-shadow: none; } }
.ring { width: 36px; height: 36px; transform: rotate(-90deg); flex-shrink: 0; }
.ring-bg { fill: none; stroke: rgba(148,163,184,.12); stroke-width: 10; }
.ring-fg { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 4px currentColor); }

/* Grade principal (cockpit 1920x1080) */
.oc-grid { min-height: 0; display: grid; gap: var(--gap);
  grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1fr) 330px 320px;
  grid-template-rows: repeat(3, minmax(0, 1fr)) minmax(0, 1.12fr);
  grid-template-areas:
    "agents map map volume feed"
    "agents map map cities feed"
    "agents map map states ins"
    "tax kanban hours ix fin"; }
.p-agents { grid-area: agents; } .p-map { grid-area: map; } .p-feed { grid-area: feed; } .p-tax { grid-area: tax; } .p-volume { grid-area: volume; }
.p-kanban { grid-area: kanban; } .p-ins { grid-area: ins; } .p-fin { grid-area: fin; } .p-cities { grid-area: cities; } .p-states { grid-area: states; }
.p-ix { grid-area: ix; } .p-hours { grid-area: hours; }
.panel { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 9px 11px 10px; overflow: hidden; }
.panel::after { content: ''; position: absolute; top: -1px; left: 14px; width: 46px; height: 2px; background: linear-gradient(90deg, var(--cy), transparent); border-radius: 2px; }
.panel h2 { margin: 0 0 7px; display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); flex-shrink: 0; }
.panel h2 .ms { font-size: 16px; color: var(--cy); }
.pbody { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.live-dot { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #fda4af; font-size: 9.5px; letter-spacing: .16em; }
.live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rd); animation: blink 1.4s infinite; }
body.demo .live-dot { color: #d8b4fe; } body.demo .live-dot::before { background: var(--vi); }
body.demo .live-dot::after { content: ' · SIMULAÇÃO'; }
@keyframes blink { 50% { opacity: .25; } }
.hint { margin: 6px 0 0; color: var(--dim); font-size: 11px; }

/* Avatares */
.av { --s: 30px; position: relative; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, #0b1730)); color: #fff; font-weight: 700; font-size: calc(var(--s) * .38); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av.xs { --s: 20px; } .av.md { --s: 32px; } .av.lg { --s: 42px; }

/* Entrada/saída genérica */
.agent, .bar-row, .fe, .map-cluster { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s, background .3s, border-color .3s, box-shadow .3s; }
.entering { opacity: 0 !important; transform: translateX(-14px) !important; }
.leaving { opacity: 0 !important; transform: scale(.94) !important; pointer-events: none; }
.flash { animation: flashCy 1.3s; } .gold { animation: flashGold 1.8s; }
@keyframes flashCy { 0% { box-shadow: 0 0 0 1px var(--cy), 0 0 22px -4px var(--cy); background-color: rgba(56,189,248,.14); } 100% { box-shadow: none; } }
@keyframes flashGold { 0%, 30% { box-shadow: 0 0 0 1px #facc15, 0 0 30px -4px #facc15; background-color: rgba(250,204,21,.16); } 100% { box-shadow: none; } }

/* Corretores */
.ag-tabs { display: flex; gap: 4px; margin-bottom: 7px; flex-shrink: 0; }
.ag-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--chip); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--dim); cursor: pointer; }
.ag-tab i { width: 7px; height: 7px; border-radius: 50%; }
.ag-tab b { font-size: 12px; }
.ag-tab.online i { background: var(--gr); box-shadow: 0 0 8px var(--gr); } .ag-tab.away i { background: var(--am); } .ag-tab.offline i { background: var(--rd); }
.ag-tab.on { color: var(--tx); border-color: var(--line2); background: rgba(56,189,248,.08); }
.ag-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.2) transparent; }
.agent { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av main value" "av stats stats"; column-gap: 9px; row-gap: 3px; align-items: center;
  padding: 7px 8px; border-radius: 10px; border: 1px solid transparent; background: var(--row); cursor: pointer; }
.agent:hover { border-color: var(--line); }
.agent.sel { border-color: var(--cy); background: rgba(56,189,248,.1); }
.ag-av { grid-area: av; position: relative; }
.ag-av .st { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #0b1730; background: var(--dim); }
.agent.online .st { background: var(--gr); box-shadow: 0 0 8px var(--gr); } .agent.away .st { background: var(--am); } .agent.offline .st { background: var(--rd); }
.agent.offline { opacity: .55; } .agent.offline .av { filter: grayscale(.8); }
.ag-main { grid-area: main; min-width: 0; }
.ag-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-meta { font-size: 10.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent.away .ag-meta { color: #fcd34d; }
.ag-stats { grid-area: stats; display: flex; gap: 10px; font-size: 10px; color: var(--dim); }
.ag-stats b { color: var(--tx); font-size: 11.5px; margin-right: 2px; }
.ag-value { grid-area: value; font-size: 11px; font-weight: 700; color: #fcd34d; }

/* Mapa */
.map-wrap { position: absolute; inset: 0; }
.map-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-layer, .map-balloons { position: absolute; inset: 0; pointer-events: none; }
.map-cluster { position: absolute; pointer-events: auto; transform: translate(-50%, calc(-100% - 12px)); display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px;
  border-radius: 999px; border: 1px solid rgba(56,189,248,.45); background: rgba(4,12,28,.82); color: #e0f2fe; font-size: 11px; cursor: pointer; white-space: nowrap; box-shadow: 0 0 14px -4px rgba(56,189,248,.8); }
.map-cluster i { width: 7px; height: 7px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 8px var(--cy); }
.map-cluster .mc-n { color: #fff; }
.map-cluster.hot { border-color: rgba(251,191,36,.6); box-shadow: 0 0 16px -4px rgba(251,191,36,.9); } .map-cluster.hot i { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.map-cluster.sel { background: rgba(56,189,248,.3); border-color: #fff; }
.map-cluster.entering { transform: translate(-50%, calc(-100% - 4px)) scale(.6) !important; }
.map-hud { position: absolute; top: 2px; left: 2px; display: flex; gap: 14px; pointer-events: none; }
.map-hud div { display: flex; flex-direction: column; }
.map-hud b { font-size: 20px; font-weight: 800; color: var(--hi); text-shadow: 0 0 14px rgba(56,189,248,.6); }
.map-hud small { font-size: 9.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .1em; }
.map-legend { position: absolute; left: 4px; bottom: 2px; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--mut); pointer-events: none; }
.lg-bar { width: 70px; height: 5px; border-radius: 4px; background: linear-gradient(90deg, #64748b, #6366f1, #38bdf8, #fbbf24); }
.lg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; } .lg-dot.cold { background: #64748b; } .lg-dot.hot { background: #fbbf24; }
.balloon { position: absolute; transform: translate(-50%, calc(-100% - 14px)) scale(.4); transform-origin: 50% calc(100% + 14px); opacity: 0;
  transition: transform .55s cubic-bezier(.2,1.4,.3,1), opacity .4s; z-index: 3; }
.balloon.flip { transform: translate(-88%, calc(-100% - 14px)) scale(.4); transform-origin: 88% calc(100% + 14px); }
.balloon.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.balloon.flip.show { transform: translate(-88%, calc(-100% - 14px)) scale(1); }
.balloon.shrink { opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(.05); transition: transform .65s ease-in, opacity .6s; }
.balloon.flip.shrink { transform: translate(-88%, calc(-100% - 14px)) scale(.05); }
.bl-card { display: flex; gap: 10px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px; min-width: 190px; max-width: 250px;
  background: linear-gradient(135deg, rgba(8,20,44,.95), rgba(20,16,48,.95)); border: 1px solid rgba(56,189,248,.5); box-shadow: 0 0 24px -6px rgba(56,189,248,.9), 0 12px 30px -10px #000; }
.bl-card .av { box-shadow: 0 0 0 2px rgba(56,189,248,.7); }
.bl-body { min-width: 0; line-height: 1.25; }
.bl-body b { display: block; font-size: 13px; color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-place { font-size: 10.5px; color: #7dd3fc; display: flex; align-items: center; gap: 2px; } .bl-place .ms { font-size: 13px; }
.bl-status { font-size: 10.5px; color: #86efac; font-weight: 600; }
.bl-agent { font-size: 10.5px; color: var(--mut); }
.bl-stem { position: absolute; left: 50%; bottom: -14px; width: 2px; height: 14px; background: linear-gradient(rgba(56,189,248,.8), transparent); transform: translateX(-50%); }
.balloon.flip .bl-stem { left: 88%; }
.balloon.sale .bl-card { border-color: rgba(250,204,21,.7); box-shadow: 0 0 30px -4px rgba(250,204,21,.9), 0 12px 30px -10px #000; }
.balloon.sale .bl-status { color: #fde047; } .balloon.sale .bl-card .av { box-shadow: 0 0 0 2px #facc15; }

/* Feed */
.feed-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; mask-image: linear-gradient(#000 75%, transparent); }
.fe { display: flex; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--row); border-left: 2px solid var(--fc, var(--cy)); }
.fe-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 15px; color: var(--fc, var(--cy)); background: color-mix(in srgb, var(--fc, var(--cy)) 14%, transparent); flex-shrink: 0; }
.fe-body { min-width: 0; }
.fe-txt { font-size: 11.5px; color: var(--tx); } .fe-txt b { color: var(--hi); font-weight: 600; }
.fe-meta { font-size: 10px; color: var(--dim); display: flex; align-items: center; gap: 2px; } .fe-meta .ms { font-size: 12px; }
.fe.new { --fc: #38bdf8; } .fe.start { --fc: #22c55e; } .fe.move { --fc: #818cf8; } .fe.end { --fc: #64748b; } .fe.tag { --fc: #22d3ee; } .fe.kanban { --fc: #a855f7; }
.fe.deal { --fc: #f59e0b; } .fe.online { --fc: #22c55e; } .fe.away { --fc: #f59e0b; } .fe.offline { --fc: #f43f5e; } .fe.msg { --fc: #34d399; opacity: .8; }
.fe.sale { --fc: #facc15; background: linear-gradient(90deg, rgba(250,204,21,.16), transparent); } .fe.sale .fe-txt { color: #fef08a; }

/* Barras */
.bars { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }
.bar-row { display: grid; grid-template-columns: auto minmax(60px, 1fr) minmax(50px, 1.3fr) 38px auto; align-items: center; gap: 7px; padding: 3px 5px; border: 1px solid transparent;
  border-radius: 7px; background: none; text-align: left; cursor: pointer; font-size: 11.5px; color: var(--tx); }
.bar-row:disabled { cursor: default; }
.bar-row:not(:disabled):hover { background: rgba(56,189,248,.07); }
.bar-row.sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.bar-row.zero { opacity: .45; }
.br-rank { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(148,163,184,.12); color: var(--mut); }
.bar-row:first-child .br-rank { background: color-mix(in srgb, var(--c) 30%, transparent); color: var(--hi); }
.br-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-track { height: 7px; border-radius: 6px; background: rgba(148,163,184,.1); overflow: hidden; }
.br-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), var(--c)); box-shadow: 0 0 10px var(--c); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.br-n { text-align: right; color: var(--hi); font-weight: 700; }
.br-pct { color: var(--mut); font-size: 10px; min-width: 38px; text-align: right; }
.bar-row.up .br-n { color: var(--c); }
.p-tax .seg { align-self: flex-start; margin-bottom: 6px; }
.p-states .bar-row { grid-template-columns: 26px minmax(50px, 1fr) 34px auto; } .p-states .br-label { font-weight: 700; }

/* Volumetria */
.vol-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; }
.vol-head div { display: flex; flex-direction: column; } .vol-head small { font-size: 8.5px; color: var(--dim); letter-spacing: .06em; white-space: nowrap; }
.vol-head b { font-size: 16px; font-weight: 800; }
.vol-chart, .hour-chart { flex: 1; min-height: 0; width: 100%; }
.vol-legend { display: flex; gap: 12px; font-size: 10px; color: var(--mut); margin-top: 2px; }
.vol-legend span::before { content: ''; display: inline-block; width: 10px; height: 3px; border-radius: 2px; background: var(--c); margin-right: 5px; vertical-align: middle; box-shadow: 0 0 6px var(--c); }

/* Kanban */
.kb-row { flex: 1; display: flex; gap: 5px; min-height: 0; }
.kb-col { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6px 5px 6px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); position: relative; cursor: default; }
.kb-col[data-b^="stage:"] { cursor: pointer; }
.kb-col.sel { border-color: var(--c); box-shadow: 0 0 16px -6px var(--c); }
.kb-name { font-size: 8.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.15; min-height: 2.3em; text-transform: uppercase; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-n { font-size: 22px; font-weight: 800; color: var(--hi); margin-top: 2px; }
.kb-col.up .kb-n { color: var(--c); text-shadow: 0 0 14px var(--c); animation: settle 1.6s forwards; }
.kb-v { font-size: 10px; color: #fcd34d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-bar { flex: 1; min-height: 10px; margin-top: 6px; display: flex; align-items: flex-end; }
.kb-bar i { display: block; width: 100%; height: 4%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 15%, transparent)); box-shadow: 0 0 14px -2px var(--c); transition: height 1s cubic-bezier(.2,.8,.2,1); }
.kb-tokens { position: absolute; inset: 0; pointer-events: none; }
.kb-token { position: absolute; left: 0; top: 0; margin: -11px 0 0 -11px; padding: 1px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px 2px var(--c); transition: transform 1s cubic-bezier(.5,0,.2,1), opacity .4s; z-index: 2; }
.kb-token.gone { opacity: 0; }

/* Financeiro */
.fin-main { position: relative; padding: 5px 8px; border-radius: 10px; background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(168,85,247,.08)); border: 1px solid rgba(245,158,11,.25); }
.fin-main small, .fin-grid small, .fin-big small { font-size: 9px; letter-spacing: .1em; color: var(--mut); font-weight: 700; }
.fin-main b { display: block; font-size: 20px; line-height: 1.2; font-weight: 800; color: #fde68a; text-shadow: 0 0 16px rgba(245,158,11,.5); }
.fin-split { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: rgba(148,163,184,.12); margin: 3px 0 1px; }
.fin-split i { display: block; height: 100%; transition: width 1s; } .fs-closed { background: var(--gr); } .fs-open { background: var(--vi); }
.fin-legend { position: absolute; top: 5px; right: 8px; display: flex; gap: 8px; font-size: 9px; color: var(--mut); } .fin-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }
.dot.closed { background: var(--gr); } .dot.open { background: var(--vi); }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 4px 0; }
.fin-grid b { display: block; font-size: 14px; line-height: 1.25; font-weight: 700; color: var(--hi); }
.fin-grid div.up b, .fin-main.up b { color: #86efac; }
.fin-big { display: flex; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 9px; background: rgba(255,255,255,.03); margin-top: auto; }
.fin-big > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.fin-big .ms { font-size: 20px; color: #fbbf24; } .fin-big b { font-size: 14px; color: #fde68a; white-space: nowrap; }
.fin-who { grid-column: 1 / -1; font-size: 10px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Interações */
.ix-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ix-tot div { display: flex; flex-direction: column; padding: 5px 7px; border-radius: 8px; background: rgba(255,255,255,.03); }
.ix-tot .ms { font-size: 15px; } .ix-tot b { font-size: 15px; font-weight: 800; color: var(--hi); } .ix-tot small { font-size: 9.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-tot div.up b { color: var(--cy); }
.ix-ch { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ix-row { display: grid; grid-template-columns: auto 120px 1fr 50px; align-items: center; gap: 7px; font-size: 11px; color: var(--tx); }
.ix-row b { text-align: right; color: var(--hi); }
.ix-stack { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(148,163,184,.1); }
.ix-stack i { display: block; height: 100%; transition: width 1s; } .ix-stack .in { background: #34d399; } .ix-stack .out { background: #38bdf8; } .ix-stack .bot { background: #a78bfa; }

/* Insights */
.ins-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.ins { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 9px; background: rgba(255,255,255,.02); border: 1px solid transparent; transition: .5s; }
.ins .ms { font-size: 18px; color: var(--c); filter: drop-shadow(0 0 6px var(--c)); }
.ins div { min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
.ins small { font-size: 10px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins b { font-size: 12.5px; color: var(--hi); text-align: right; white-space: nowrap; }
.ins span:not(.ms) { grid-column: 1 / -1; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins.focus { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }

/* Celebrações e alertas */
#celebrate { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.cel { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(60,40,0,.92), rgba(30,20,60,.92));
  border: 1px solid rgba(250,204,21,.7); box-shadow: 0 0 50px -6px rgba(250,204,21,.8); opacity: 0; transform: translateY(-20px) scale(.9); transition: .5s cubic-bezier(.2,1.3,.3,1); }
.cel.show { opacity: 1; transform: none; }
.cel > .ms { font-size: 34px; color: #facc15; filter: drop-shadow(0 0 10px #facc15); }
.cel small { font-size: 10px; letter-spacing: .2em; color: #fde68a; font-weight: 700; } .cel b { display: block; font-size: 24px; color: #fff; } .cel span:not(.ms) { font-size: 11.5px; color: #e2e8f0; }
body.sale-glow::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 120px rgba(250,204,21,.25); animation: fadeOut 1.6s forwards; }
body.lead-flash .oc-head { animation: headFlash 1s; }
@keyframes headFlash { 30% { filter: drop-shadow(0 0 10px rgba(56,189,248,.6)); } }
@keyframes fadeOut { to { opacity: 0; } }
.oc-block { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(2,6,15,.75); }
.oc-block .glass { padding: 28px 32px; max-width: 420px; text-align: center; } .oc-block h3 { margin: 0 0 8px; } .oc-block p { color: var(--mut); }

/* Visões de aprofundamento */
body:not([data-view="geral"]) .oc-grid { grid-template-areas: none; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(300px, 1fr); overflow-y: auto; }
body:not([data-view="geral"]) .panel { grid-area: auto; }
body:not([data-view="geral"]) .p-map, body:not([data-view="geral"]) .p-kanban { grid-column: span 2; }
body:not([data-view="geral"]) .p-map { grid-row: span 2; }
.panel.off { display: none; }

/* Responsividade */
@media (max-width: 1599px) {
  body { overflow: auto; }
  .oc { height: auto; min-height: calc(100vh - 20px); }
  .oc-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .oc-grid { grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr) 320px; grid-template-rows: repeat(3, 230px) 250px 250px;
    grid-template-areas:
      "agents map map feed"
      "agents map map feed"
      "agents map map ins"
      "volume volume kanban kanban"
      "tax cities states fin"; }
  .p-ix, .p-hours { display: none; }
  body:not([data-view="geral"]) .p-ix:not(.off), body:not([data-view="geral"]) .p-hours:not(.off) { display: flex; }
  .oc-views { order: 3; width: 100%; margin: 0; }
  .oc-head { flex-wrap: wrap; }
}
@media (max-width: 1099px) {
  .oc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-grid, body:not([data-view="geral"]) .oc-grid { grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: none; grid-auto-rows: auto; }
  .panel { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; min-height: 280px; }
  .p-map { min-height: 460px; } .p-ix, .p-hours { display: flex; }
  .oc-right .oc-clock { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Modo claro (mesma preferência do sistema: sdr_light) */
html[data-theme="light"] {
  --bg: #e8ecf8; --bg2: #f4f6fc; --glass: rgba(255, 255, 255, .78); --line: rgba(55, 48, 163, .14); --line2: rgba(55, 48, 163, .28);
  --tx: #334155; --hi: #0f172a; --mut: #64748b; --dim: #94a3b8; --cy: #4f46e5; --vi: #6366f1; --am: #d97706; --gr: #16a34a; --rd: #dc2626;
  --panel-soft: rgba(255, 255, 255, .85); --chip: rgba(241, 245, 249, .95); --row: rgba(15, 23, 42, .03); --shadow: rgba(15, 23, 42, .12);
  color-scheme: light;
}
html[data-theme="light"] body::before {
  background-image: linear-gradient(rgba(79,70,229,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.06) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
}
html[data-theme="light"] .glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(15, 23, 42, .06); }
html[data-theme="light"] .oc-views button.on { color: #fff; box-shadow: 0 8px 18px rgba(79, 70, 229, .28); }
html[data-theme="light"] .oc-status.online { color: #15803d; }
html[data-theme="light"] .oc-status.demo { color: #7e22ce; }
html[data-theme="light"] .oc-status.offline { color: #b91c1c; }
html[data-theme="light"] .flt select option, html[data-theme="light"] .flt select optgroup { background: #fff; color: var(--tx); }
html[data-theme="light"] .map-hud b { text-shadow: none; }
html[data-theme="light"] .map-cluster { background: rgba(255,255,255,.92); color: #0f172a; border-color: rgba(79,70,229,.35); box-shadow: 0 6px 16px rgba(15,23,42,.12); }
html[data-theme="light"] .map-cluster .mc-n { color: #0f172a; }
html[data-theme="light"] .bl-card { background: linear-gradient(135deg, #fff, #eef2ff); border-color: rgba(79,70,229,.35); box-shadow: 0 12px 28px rgba(15,23,42,.14); }
html[data-theme="light"] .bl-place { color: #0284c7; }
html[data-theme="light"] .ag-av .st { border-color: #fff; }
html[data-theme="light"] .fe.sale .fe-txt { color: #a16207; }
html[data-theme="light"] .fin-main b { color: #b45309; text-shadow: none; }
html[data-theme="light"] .fin-big b { color: #b45309; }
html[data-theme="light"] .oc-block { background: rgba(15, 23, 42, .35); }
html[data-theme="light"] .oc-tvswitch { background: radial-gradient(circle, rgba(255,255,255,.88), rgba(232,236,248,.55)); }
html[data-theme="light"] .oc-tvswitch b { color: var(--hi); text-shadow: 0 0 30px rgba(79,70,229,.35); }
html[data-theme="light"] .cel { background: linear-gradient(135deg, #fffbeb, #f5f3ff); color: var(--hi); }
html[data-theme="light"] .cel b { color: var(--hi); }
html[data-theme="light"] .cel span:not(.ms) { color: var(--tx); }
html[data-theme="light"] .kpi.up .kpi-val, html[data-theme="light"] .kb-col.up .kb-n { text-shadow: none; }