/* Mockups ilustrativos das telas Hub4 (dados fictícios, sem exposição da aplicação real) */
.mk{background:#0e0e10;font-size:11px;line-height:1.35;color:#e8ecf4;user-select:none}
.mk__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#17181c;border-bottom:1px solid #26272c}
.mk__bar i{width:9px;height:9px;border-radius:50%;background:#34363c}
.mk__bar span{margin-left:10px;flex:1;max-width:240px;background:#0e0e10;border-radius:6px;padding:3px 10px;color:#7b8294;font-size:10px}
.mk__top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #1f2024;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:12px}
.mk__top em{font-style:normal;font-family:"IBM Plex Sans";font-weight:500;font-size:10px;color:#7b8294}
.mk__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3ddc97;margin-right:5px}
.mk .badge{width:22px;height:22px;border-radius:6px;margin:0}
.mk .badge .icon{width:13px;height:13px}
.shot figcaption{padding:8px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);background:var(--bg-alt)}

/* portal */
.mk-portal{padding:14px}
.mk-portal h5{font:700 15px "Space Grotesk";margin-bottom:2px}
.mk-portal p{color:#7b8294;font-size:10px;margin-bottom:12px}
.mk-portal__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mk-card{background:#17181c;border:1px solid #26272c;border-radius:10px;padding:10px}
.mk-card b{display:block;font:700 11px "Space Grotesk";margin:7px 0 2px}
.mk-card small{color:#7b8294;font-size:9px}
.mk-card u{display:inline-block;text-decoration:none;margin-top:6px;border:1px solid #1d7ca5;color:#4fb4de;border-radius:99px;padding:1px 7px;font-size:9px}

/* alertas */
.mk-alerts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:300px}
.mk-list{border-right:1px solid #1f2024}
.mk-tabs{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid #1f2024}
.mk-tabs span{padding:2px 9px;border-radius:99px;border:1px solid #26272c;color:#7b8294;font-size:10px}
.mk-tabs .on{background:#1d7ca5;border-color:#1d7ca5;color:#fff}
.mk-row{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid #17181c}
.mk-row.sel{background:#13222b}
.mk-row b{display:block;font-weight:500}
.mk-row small{color:#7b8294;font-size:9.5px}
.mk-row time{color:#7b8294;font-size:10px}
.sev{width:8px;height:8px;border-radius:50%}
.sev--c{background:#ff5d5d}.sev--h{background:#ff9f43}.sev--m{background:#f5d547}.sev--l{background:#4fb4de}
.mk-detail{padding:12px}
.mk-detail h6{font:700 12px "Space Grotesk";margin-bottom:2px}
.mk-detail small{color:#7b8294}
.mk-tl{margin:10px 0;border-left:2px solid #26272c;padding-left:10px;display:grid;gap:7px}
.mk-tl div{position:relative}
.mk-tl div::before{content:"";position:absolute;left:-15px;top:4px;width:6px;height:6px;border-radius:50%;background:#1d7ca5}
.mk-sop{background:#17181c;border:1px solid #26272c;border-radius:8px;padding:8px;display:grid;gap:5px}
.mk-sop span::before{content:"";display:inline-block;width:9px;height:9px;border:1.5px solid #4a4d57;border-radius:2px;margin-right:6px;vertical-align:-1px}
.mk-sop .ok::before{background:#3ddc97;border-color:#3ddc97}
.mk-btn{display:inline-block;margin-top:9px;background:#1d7ca5;color:#fff;border-radius:6px;padding:5px 12px;font-size:10px}

/* videowall */
.mk-wall{padding:8px}
.mk-tool{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.mk-tool span{padding:2px 9px;border-radius:6px;border:1px solid #26272c;color:#7b8294;font-size:10px}
.mk-tool .on{background:#13222b;border-color:#1d7ca5;color:#4fb4de}
.mk-tool em{margin-left:auto;font-style:normal;color:#7b8294;font-size:10px}
.mk-cams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cam{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;border:1px solid #26272c}
.cam::before{content:"";position:absolute;inset:0;background:var(--scene)}
.cam::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.cam b{position:absolute;left:6px;bottom:5px;z-index:1;font-weight:500;font-size:9px;text-shadow:0 1px 2px #000}
.cam i{position:absolute;right:6px;top:5px;z-index:1;font-style:normal;font-size:8.5px;color:#ff6b6b}
.cam i::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#ff4d4d;margin-right:3px}
.cam .box{position:absolute;z-index:1;border:1.5px solid #3ddc97;border-radius:3px}
.cam .box::after{content:attr(data-l);position:absolute;top:-11px;left:-1px;background:#3ddc97;color:#04170e;font-size:8px;padding:0 3px;border-radius:2px;white-space:nowrap}
.cam .shape{position:absolute;z-index:0;background:rgba(0,0,0,.35);border-radius:3px}

/* mapa */
.mk-map{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:300px}
.mk-map__canvas{position:relative;overflow:hidden;background:#0f1a22}
.mk-map__canvas svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#4fb4de;border:2px solid #0e0e10;z-index:1}
.pin--r{background:#ff5d5d}
.mk-map__side{padding:12px;border-left:1px solid #1f2024}
.imr{display:flex;align-items:baseline;gap:6px;margin:4px 0 8px}
.imr strong{font:700 28px "Space Grotesk";color:#ff9f43}
.imr span{color:#7b8294}
.bands{display:flex;height:6px;border-radius:99px;overflow:hidden;margin-bottom:12px}
.bands i{flex:1}
.bands i:nth-child(1){background:#3ddc97}.bands i:nth-child(2){background:#f5d547}.bands i:nth-child(3){background:#ff9f43}.bands i:nth-child(4){background:#ff5d5d}
.mk-pass{display:grid;gap:6px;margin-top:6px}
.mk-pass div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:#17181c;border:1px solid #26272c;border-radius:6px;padding:5px 8px}
.plate{font:700 10px "Space Grotesk";letter-spacing:.08em;background:#f2f2f2;color:#111;border-top:3px solid #1d4fa5;border-radius:3px;padding:0 5px}
.mk-pass small{color:#7b8294;font-size:9.5px}

@media (max-width:620px){
  .mk-portal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-alerts,.mk-map{grid-template-columns:minmax(0,1fr)}
  .mk-list,.mk-map__side{border:0;border-bottom:1px solid #1f2024}
  .mk-detail{display:none}
  .mk-map__canvas{min-height:200px}
}

/* Mosaico VMS: print real + câmeras fictícias sobrepostas */
.shot--vms{position:relative;container-type:inline-size}
.shot--vms>img{display:block}
.vgrid{position:absolute;left:17.8%;top:18%;right:.4%;bottom:calc(2.6em + 4px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.5cqw;padding:.5cqw 0 .3cqw .5cqw}
.vcam{position:relative;overflow:hidden;border-radius:.4cqw;border:1px solid #26272c;background:#000}
.vcam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcam::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 70%,rgba(0,0,0,.55))}
.vcam b,.vcam time,.vcam i{position:absolute;z-index:2;font-size:.78cqw;text-shadow:0 1px 2px #000;color:#fff}
.vcam b{left:.6cqw;bottom:.4cqw;font-weight:500}
.vcam time{right:.6cqw;bottom:.4cqw;opacity:.8}
.vcam i{right:.6cqw;top:.4cqw;font-style:normal;color:#ff6b6b}
.vcam i::before{content:"";display:inline-block;width:.5cqw;height:.5cqw;border-radius:50%;background:#ff4d4d;margin-right:.3cqw}
.vbox{position:absolute;z-index:2;border:.12cqw solid;border-radius:2px}
.vbox em{position:absolute;top:-1.1cqw;left:-1px;font-style:normal;color:#04170e;font-size:.65cqw;padding:0 .3cqw;border-radius:2px;white-space:nowrap}
@media (max-width:620px){.vcam b,.vcam time,.vcam i,.vbox em{display:none}}

/* Hub4 Defense: print real com mapa fictício sobreposto */
.shot--def{container-type:inline-size}
.shotwrap{position:relative}
.shotwrap>img{display:block}
.dmap{position:absolute;left:17.8%;top:19.18%;right:0;bottom:0;overflow:hidden;color:#e8ecf4;font-size:.8cqw}
.dmap>svg{position:absolute;inset:0;width:100%;height:100%}
.dmap__zoom{position:absolute;left:1.4cqw;top:1.4cqw;display:grid;background:#fff;border-radius:.4cqw;box-shadow:0 1px 4px rgba(0,0,0,.3);color:#222;font:700 1.5cqw/1 "Space Grotesk";overflow:hidden}
.dmap__zoom span{width:2.6cqw;height:2.6cqw;display:grid;place-items:center}
.dmap__zoom span+span{border-top:1px solid #ddd}
.dmap__card{position:absolute;left:5.4cqw;top:1.4cqw;width:18cqw;background:#17181c;border:1px solid #2c2e34;border-radius:.7cqw;padding:.9cqw 1cqw;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.dmap__card b{display:block;font-size:.75cqw;letter-spacing:.1em;color:#7fb7d8}
.dmap__sel{display:flex;justify-content:space-between;margin:.6cqw 0;background:#0e0e10;border:1px solid #2c2e34;border-radius:.4cqw;padding:.5cqw .7cqw}
.dmap__card p{margin:0 0 .5cqw;color:#c3c9d6}.dmap__card em{font-style:normal;color:#ffb02e;font-weight:600}
.dmap__card label{display:flex;align-items:center;gap:.5cqw;color:#c3c9d6}
.chk{display:inline-block;width:.9cqw;height:.9cqw;border-radius:.2cqw;background:#2f6fd6}
.dmap__bar{display:flex;align-items:center;gap:.5cqw;margin-top:.6cqw}
.dmap__bar small{font-size:.7cqw}
.dmap__bar u{flex:1;height:.5cqw;border-radius:99px;background:linear-gradient(90deg,#2f6fd6,#2fb7d6,#7dd957,#ffd23f,#ff8a2b)}
.dmap__legend{position:absolute;left:1.4cqw;bottom:1.4cqw;background:#17181c;border:1px solid #2c2e34;border-radius:.7cqw;padding:.7cqw 1cqw;display:grid;gap:.35cqw;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.dmap__legend span{display:flex;align-items:center;gap:.6cqw}
.dmap__legend i{width:.9cqw;height:.9cqw;border-radius:50%}
@media (max-width:620px){.dmap__card p,.dmap__card label,.dmap__legend{display:none}}