/* O mapa isométrico, a barra superior e os elementos flutuantes (HUD). */

/* ---------- barra superior ---------- */
.topbar { height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--border); background: rgba(10,14,21,.78); backdrop-filter: blur(12px); position: relative; z-index: 30; }
.topbar .logo-name { font-size: 16.5px; }
.topbar .logo-sub { font-size: 8.5px; }
.topbar .logo-mark { width: 34px; height: 34px; border-radius: 10px; }
.top-busca { margin-left: 8px; display: flex; align-items: center; gap: 9px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; color: var(--text3); font-size: 12.5px; min-width: 210px; transition: all .2s; }
.top-busca:hover { border-color: var(--border2); color: var(--text2); }
.top-busca kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; border: 1px solid var(--border2); border-radius: 5px; padding: 1px 6px; color: var(--text3); }
.top-chips { display: flex; gap: 8px; margin-left: auto; align-items: center; overflow: hidden; }
.chip-kpi { display: flex; flex-direction: column; gap: 1px; padding: 5px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer; transition: all .2s; text-align: left; min-width: 0; }
.chip-kpi:hover { border-color: rgba(74,222,128,.3); transform: translateY(-1px); }
.chip-kpi .k { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); white-space: nowrap; }
.chip-kpi .v { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.chip-kpi.warn .v { color: var(--amber); }
.chip-kpi.bad .v { color: var(--red); }
.user-btn { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border-radius: 10px; border: 1px solid transparent; background: transparent; }
.user-btn:hover { background: var(--bg3); border-color: var(--border); }
.avatar { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--cyan)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #06121f; }
.user-nome { font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: left; }
.user-nome small { display: block; font-weight: 400; color: var(--text3); font-size: 10.5px; }

/* ---------- palco ---------- */
.palco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mapa-host { position: absolute; inset: 0; }
.mapa { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapa.arrastando { cursor: grabbing; }
.mundo { transition: none; }

/* terreno e ruas */
.mapa { --c-top: #162036; --c-left: #0f1727; --c-right: #0a101d; --c-edge: rgba(150,170,210,.13); }
.terreno .ft { fill: url(#chao-grad); stroke: rgba(120,150,200,.22); }
.terreno .fl { fill: #0b111d; stroke: rgba(120,150,200,.12); }
.terreno .fr { fill: #070b14; stroke: rgba(120,150,200,.1); }
.malha { stroke: rgba(130,160,210,.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.malha.forte { stroke: rgba(130,160,210,.085); }
.via { fill: rgba(150,175,220,.035); stroke: none; }
.eixo-via { stroke: rgba(150,175,220,.12); stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }

/* blocos */
.cx .ft { fill: var(--c-top); }
.cx .fl { fill: var(--c-left); }
.cx .fr { fill: var(--c-right); }
.cx path, .cx polygon, .cx ellipse { stroke: var(--c-edge); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cx.ac { --c-top: color-mix(in srgb, var(--ac) 30%, #121b2f); --c-left: color-mix(in srgb, var(--ac) 16%, #0d1424); --c-right: color-mix(in srgb, var(--ac) 8%, #090e1a); --c-edge: color-mix(in srgb, var(--ac) 52%, transparent); }
.cx.luz { --c-top: color-mix(in srgb, var(--ac) 84%, #fff 6%); --c-left: color-mix(in srgb, var(--ac) 56%, #0d1424); --c-right: color-mix(in srgb, var(--ac) 38%, #090e1a); --c-edge: color-mix(in srgb, var(--ac) 92%, #fff); }
.cx.luz-suave { --c-top: color-mix(in srgb, var(--ac) 52%, #121b2f); --c-left: color-mix(in srgb, var(--ac) 30%, #0d1424); --c-right: color-mix(in srgb, var(--ac) 20%, #090e1a); --c-edge: color-mix(in srgb, var(--ac) 80%, #fff 5%); }
.cx.vidro { opacity: .78; }
.cx.fantasma .ft, .cx.fantasma .fl, .cx.fantasma .fr { fill: color-mix(in srgb, var(--ac) 3%, transparent); stroke: color-mix(in srgb, var(--ac) 28%, transparent); stroke-dasharray: 3 4; }
.cx.laje { --c-top: #121b2e; --c-left: color-mix(in srgb, var(--ac) 10%, #0b1120); --c-right: color-mix(in srgb, var(--ac) 5%, #070b14); --c-edge: color-mix(in srgb, var(--ac) 38%, transparent); }
.brilho { stroke: rgba(255,255,255,.1) !important; stroke-width: 1.4 !important; fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.piso { fill: color-mix(in srgb, var(--ac) 6%, #0c1322); stroke: color-mix(in srgb, var(--ac) 26%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grade { stroke: color-mix(in srgb, var(--ac) 15%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vidro { stroke: none; }
.montante { stroke: color-mix(in srgb, var(--ac) 22%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.neon { fill: none; stroke: var(--ac); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.neon.suave { opacity: .45; }
.tela { fill: rgba(5,9,16,.86); stroke: color-mix(in srgb, var(--ac) 70%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela.apagada { fill: rgba(8,11,18,.9); stroke: rgba(140,155,180,.25); }
.eixo { stroke: color-mix(in srgb, var(--ac) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pt { fill: var(--ac); }
.anel { fill: none; stroke: color-mix(in srgb, var(--ac) 65%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.anel.suave { stroke: color-mix(in srgb, var(--ac) 32%, transparent); }
.anel.luz-anel { stroke: var(--ac); fill: color-mix(in srgb, var(--ac) 26%, transparent); }
.anel.arco { stroke-dasharray: 5 9; }
.balao { stroke: var(--ac); stroke-width: 1; vector-effect: non-scaling-stroke; }
.balao.entra { fill: rgba(16,24,40,.88); stroke: color-mix(in srgb, var(--ac) 45%, transparent); }
.balao.sai { fill: color-mix(in srgb, var(--ac) 38%, #0b1220); }
.balao.mini { stroke-width: .8; }
.txt { stroke: rgba(235,245,255,.5); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.haste { fill: none; stroke: color-mix(in srgb, var(--ac) 55%, transparent); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.janela { fill: rgba(20,30,50,.9); stroke: none !important; }
.janela.on { fill: color-mix(in srgb, var(--ac) 88%, #fff); filter: drop-shadow(0 0 2px var(--ac)); }
.janela.dir.on { fill: color-mix(in srgb, var(--ac) 62%, #0b1220); }
.codigo { stroke: color-mix(in srgb, var(--ac) 85%, #fff); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.pino { stroke: color-mix(in srgb, var(--ac) 70%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.aramado { fill: none; stroke: var(--ac); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: .9; }
.cofre { fill: none; stroke: color-mix(in srgb, var(--ac) 80%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fenda { stroke: rgba(180,200,235,.22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cabo { fill: none; stroke: color-mix(in srgb, var(--ac) 55%, transparent); stroke-width: 1.4; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.led { filter: drop-shadow(0 0 3px currentColor); }
.feixe { opacity: .9; }
.orbita-tras { fill: none; stroke: color-mix(in srgb, var(--ac) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; opacity: .7; }
.satelite { fill: var(--ac); filter: drop-shadow(0 0 4px var(--ac)); }
.halo { fill: color-mix(in srgb, var(--ac) 18%, transparent); stroke: none; }
.losango { fill: color-mix(in srgb, var(--ac) 82%, #fff 12%); stroke: #e8fff3; stroke-width: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px var(--ac)); }
.losango-linha { stroke: #052a2f; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.elo { stroke: color-mix(in srgb, var(--ac) 70%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; animation: elo 1.2s linear infinite; }
@keyframes elo { to { stroke-dashoffset: -14; } }
.agente .cx path, .agente .cx polygon { stroke-width: 1; }
.distintivo circle { fill: var(--erro); stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--erro)); }
.distintivo text { fill: #fff; font: 700 10px var(--mono); text-anchor: middle; }

/* animações das salas */
.ping-anel { animation: ping 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ping { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.sinal { animation: sinal 2.4s ease-in-out infinite; }
@keyframes sinal { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.gota { fill: var(--ac); animation: gota 2.2s ease-in infinite; opacity: 0; }
@keyframes gota { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .95; } 100% { transform: translateY(var(--queda)); opacity: 0; } }
.flutua { animation: flutua 3.6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes piscar { 50% { opacity: .25; } }

/* salas: estados */
.sala { cursor: pointer; transition: opacity .35s, filter .35s; outline: none; }
.sala .cena { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sala.hover .cena, .sala:focus-visible .cena { transform: translateY(-5px); }
.sala.hover .laje, .sala.foco .laje { --c-edge: var(--ac); }
.sala:focus-visible .laje { --c-edge: #fff; }
.halo-sala { opacity: .55; transition: opacity .3s; pointer-events: none; }
.sala.hover .halo-sala, .sala.foco .halo-sala { opacity: 1; }
.com-foco .sala:not(.foco) { opacity: .42; }
.com-foco .rotulo:not(.foco) { opacity: .5; }
.entrando { animation: entra .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.rotulo { animation: aparece .7s ease backwards; animation-delay: calc(var(--i) * 70ms + 600ms); }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* rótulos */
.rotulo { cursor: pointer; transition: opacity .35s; }
.rot-haste { stroke: color-mix(in srgb, var(--ac) 55%, transparent); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.rot-corpo { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.rot-bg { fill: rgba(11,16,25,.88); stroke: color-mix(in srgb, var(--ac) 38%, #232d42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rotulo.hover .rot-bg, .rotulo.foco .rot-bg { stroke: var(--ac); fill: rgba(14,20,31,.95); }
.rot-faixa { fill: var(--ac); }
.rot-nome { font: 700 13px 'Inter', sans-serif; fill: var(--text); letter-spacing: -.01em; }
.rot-sub { font: 500 8.6px var(--mono); fill: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.rot-sinal { fill: var(--ok); filter: drop-shadow(0 0 4px var(--ok)); }
.rot-sinal.sn-atencao { fill: var(--aviso); filter: drop-shadow(0 0 4px var(--aviso)); }
.rot-sinal.sn-risco { fill: var(--erro); filter: drop-shadow(0 0 4px var(--erro)); animation: piscar 1.2s infinite; }
.rot-alerta circle { fill: rgba(251,191,36,.14); stroke: var(--aviso); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rot-alerta text { fill: var(--aviso); font: 700 10px var(--mono); text-anchor: middle; }

/* fluxos de dados (integrações) */
.fluxo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fl-brilho { stroke-width: 8; opacity: .12; vector-effect: non-scaling-stroke; }
.fl-nucleo { stroke-width: 1.8; opacity: .9; vector-effect: non-scaling-stroke; }
.fl-corre { stroke-width: 2.6; stroke-dasharray: 1.5 15; vector-effect: non-scaling-stroke; animation: corre 1.4s linear infinite; opacity: .95; }
@keyframes corre { to { stroke-dashoffset: -33; } }
.fl-alvo { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: help; vector-effect: non-scaling-stroke; }
.fluxo.st-pendente .fl-nucleo { stroke: var(--orange) !important; stroke-dasharray: 5 6; opacity: .75; }
.fluxo.st-pendente .fl-brilho { stroke: var(--orange) !important; opacity: .08; }
.fluxo.st-pendente .fl-corre { display: none; }
.fluxo.st-planejada .fl-nucleo { stroke: #64748b !important; stroke-dasharray: 1.5 7; opacity: .5; }
.fluxo.st-planejada .fl-brilho, .fluxo.st-planejada .fl-corre { display: none; }
.fluxo.st-erro .fl-nucleo, .fluxo.st-erro .fl-corre, .fluxo.st-erro .fl-brilho { stroke: var(--erro) !important; animation: piscar 1s infinite; }
.fluxo.hot .fl-brilho { opacity: .3; stroke-width: 11; }
.fluxo.hot .fl-nucleo { stroke-width: 2.4; opacity: 1; }
.fluxo.dim { opacity: .25; }
.fluxo.pulsa .fl-brilho { opacity: .55; stroke-width: 14; transition: all .3s; }
.porta { pointer-events: none; opacity: .95; }
.porta path { filter: drop-shadow(0 0 4px currentColor); }
.porta.st-planejada { opacity: .4; }
.porta.st-pendente { opacity: .7; }
.pacote { pointer-events: none; }
.pacote-halo { pointer-events: none; }
.pacote.ev { filter: drop-shadow(0 0 6px #fff); }
.onda { fill: none; stroke: var(--ac); stroke-width: 2; vector-effect: non-scaling-stroke; animation: onda 1.8s ease-out forwards; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.onda.sev-warn { stroke: var(--aviso); }
.onda.sev-error { stroke: var(--erro); }
@keyframes onda { from { transform: scale(.6); opacity: .9; } to { transform: scale(9); opacity: 0; } }
.mundo.sem-fluxos .fluxos, .mundo.sem-fluxos .portas, .mundo.sem-fluxos .pacotes { display: none; }
.mundo.sem-rotulos .rotulos { display: none; }
.mundo.sem-malha .malha { display: none; }

/* ---------- elementos flutuantes ---------- */
.hud { position: absolute; z-index: 10; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-esq { left: 16px; bottom: 54px; display: flex; flex-direction: column; gap: 10px; width: 188px; }
.glass { background: var(--vidro); backdrop-filter: blur(14px); border: 1px solid var(--border2); border-radius: 14px; }
.hud-bloco { padding: 12px 13px; }
.hud-titulo { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--text3); margin-bottom: 9px; }
.camada { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12px; color: var(--text2); cursor: pointer; }
.camada input { width: 14px; height: 14px; }
.legenda-item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text2); padding: 3px 0; }
.legenda-item .tr { width: 26px; height: 0; border-top: 2px solid; flex: none; }
.legenda-item .tr.ativa { border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.legenda-item .tr.pendente { border-top-style: dashed; border-color: var(--orange); }
.legenda-item .tr.planejada { border-top-style: dotted; border-color: #64748b; }
.legenda-item .ponto { width: 8px; height: 8px; border-radius: 50%; margin: 0 9px; flex: none; }

.hud-dir { right: 16px; top: 14px; width: 292px; max-height: calc(100% - 100px); display: flex; flex-direction: column; gap: 10px; }
.radar { padding: 14px; display: flex; flex-direction: column; min-height: 0; }
.radar-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.radar-item { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: rgba(17,22,33,.7); transition: all .2s; font-size: 12px; line-height: 1.4; color: var(--text); width: 100%; }
.radar-item:hover { border-color: var(--border2); background: var(--card2); }
.radar-item .sev { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; }
.radar-item .sev.bad { background: var(--erro); box-shadow: 0 0 8px var(--erro); }
.radar-item .sev.warn { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); }
.radar-item .sev.info { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.radar-item small { display: block; color: var(--text3); font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.radar-ok { display: flex; gap: 10px; align-items: center; color: var(--text2); font-size: 12.5px; padding: 6px 2px; }
.radar-ok .ic { color: var(--accent); }

.hud-base { left: 220px; right: 16px; bottom: 14px; }
.ticker { display: flex; align-items: center; gap: 14px; padding: 8px 14px; overflow: hidden; height: 36px; }
.ticker-rot { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); display: flex; align-items: center; gap: 7px; flex: none; }
.ticker-rot i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: piscar 2s infinite; }
.ticker-itens { display: flex; gap: 22px; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ev { font-size: 12px; color: var(--text2); display: inline-flex; gap: 7px; align-items: center; }
.ev i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--c, var(--text3)); }
.ev b { color: var(--text); font-weight: 600; }
.ev time { font-family: var(--mono); font-size: 10px; color: var(--text3); }

.hud-zoom { right: 16px; bottom: 54px; display: flex; flex-direction: column; gap: 6px; }
.hud-zoom .btn { width: 34px; height: 34px; padding: 0; }

/* dica ao passar o mouse */
.dica { position: fixed; z-index: 60; pointer-events: none; width: 262px; padding: 14px; background: rgba(12,17,26,.96); border: 1px solid var(--border2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); backdrop-filter: blur(12px); opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.dica.on { opacity: 1; transform: none; }
.dica-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dica-topo .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px var(--ac); flex: none; }
.dica-topo b { font-size: 14px; letter-spacing: -.01em; }
.dica-topo small { display: block; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-top: 1px; }
.dica-kpi { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--border); color: var(--text2); }
.dica-kpi b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dica-kpi b.warn { color: var(--amber); } .dica-kpi b.bad { color: var(--red); }
.dica-alerta { font-size: 11.5px; color: var(--amber); margin-top: 8px; display: flex; gap: 7px; line-height: 1.4; }
.dica-abrir { margin-top: 10px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.dica-fluxo p { font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 6px; }
.dica-fluxo .linha { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }

/* ---------- paleta de comandos ---------- */
.paleta-fundo { position: fixed; inset: 0; z-index: 95; background: rgba(4,7,12,.6); backdrop-filter: blur(4px); display: flex; justify-content: center; padding-top: 14vh; }
.paleta { width: 560px; max-width: calc(100vw - 24px); max-height: 62vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; align-self: flex-start; }
.paleta input { border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 18px; font-size: 15px; background: transparent; box-shadow: none !important; }
.paleta-lista { overflow-y: auto; padding: 8px; }
.paleta-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; width: 100%; border: none; background: transparent; text-align: left; }
.paleta-item.sel, .paleta-item:hover { background: var(--bg3); }
.paleta-item small { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.paleta-item .tipo { font-family: var(--mono); font-size: 9.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; width: 78px; flex: none; }
.paleta-rodape { padding: 8px 14px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 10px; color: var(--text3); display: flex; gap: 16px; }

@media (max-width: 1180px) { .top-chips .chip-kpi:nth-child(n+5) { display: none; } .top-busca { min-width: 150px; } }
@media (max-width: 900px) {
  .hud-esq, .hud-dir, .hud-base, .top-chips { display: none; }
  .topbar { padding: 0 12px; }
  .top-busca { margin-left: auto; min-width: 0; }
  .top-busca span, .top-busca kbd { display: none; }
  .user-nome { display: none; }
}