@font-face{font-family:D-DIN;src:url("../assets/fonts/d-din/D-DIN.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:D-DIN;src:url("../assets/fonts/d-din/D-DIN-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
:root{--bg:#061322;--bg2:#0a1d31;--panel:rgba(8,14,25,.76);--panel2:rgba(11,24,39,.84);--line:rgba(117,151,185,.25);--line2:rgba(92,210,232,.42);--text:#f5f7fb;--muted:#aab5c5;--cyan:#68fff0;--blue:#3091ff;--green:#4ff08b;--amber:#ffd450;--danger:#ff6a4f;--shadow:0 24px 70px rgba(0,0,0,.36)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07131f;color:var(--text);font-family:D-DIN,Arial,sans-serif;overflow-x:hidden}body{background:radial-gradient(circle at 52% 42%,rgba(29,118,148,.24),transparent 28%),radial-gradient(circle at 78% 18%,rgba(47,112,181,.16),transparent 32%),linear-gradient(115deg,#020910 0%,#071827 48%,#0a1c30 100%)}body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:120px 120px;opacity:.35}button,a{font:inherit;color:inherit}button{cursor:pointer}#particles{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}.mc-hmi{position:relative;z-index:1;min-height:100vh;padding:0 4vw 26px}.app-toolbar{position:fixed;left:0;right:0;top:0;z-index:20;border-bottom:1px solid rgba(122,155,190,.2);background:rgba(2,10,17,.76);backdrop-filter:blur(16px)}.app-toolbar__rail{display:grid;grid-template-columns:minmax(160px,260px) minmax(0,1fr) auto;align-items:center;gap:20px;min-height:86px;padding:0 4vw}.app-toolbar__brand{display:inline-flex;align-items:center;text-decoration:none}.app-toolbar__logo{display:block;width:178px;max-width:100%;height:auto}.app-toolbar__title{justify-self:center;text-align:center;text-transform:uppercase;font-weight:700;font-size:30px;letter-spacing:.18em;white-space:nowrap}.app-toolbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.app-toolbar__status,.mc-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid rgba(143,169,198,.28);border-radius:999px;background:rgba(9,18,31,.64);padding:0 20px;text-decoration:none;text-transform:uppercase;font-weight:700;font-size:12px;letter-spacing:.12em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.app-toolbar__status:hover,.mc-action:hover{border-color:rgba(104,255,240,.58);color:#dffff9}.language-toggle{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:3px;border:1px solid rgba(143,169,198,.28);border-radius:999px;background:rgba(13,24,39,.8)}.language-toggle__button{min-width:40px;min-height:34px;border:0;border-radius:999px;background:transparent;color:#c9d2dd;font-weight:700;font-size:12px}.language-toggle__button.is-active{background:#2f73ff;color:#fff;box-shadow:0 0 18px rgba(47,115,255,.45)}.mc-layout{display:grid;grid-template-columns:240px minmax(420px,1fr) 240px;gap:16px;max-width:1760px;margin:0 auto;padding-top:112px}.mc-col{display:flex;flex-direction:column;gap:10px;min-width:0}.mc-col h3,.mc-map-head,.mc-panel-head h3,.mc-events h3{margin:0;text-transform:uppercase;font-size:16px;letter-spacing:.05em;font-weight:700}.mc-card,.mc-trend,.mc-events{border:1px solid var(--line);border-radius:8px;background:linear-gradient(155deg,rgba(13,20,31,.82),rgba(5,11,19,.72));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.mc-card{width:100%;min-height:124px;padding:16px 14px;text-align:left}.mc-card.is-active{border-color:rgba(104,255,240,.75);box-shadow:0 0 28px rgba(104,255,240,.11),inset 0 0 0 1px rgba(104,255,240,.1)}.mc-tagline{display:flex;justify-content:space-between;gap:10px;text-transform:uppercase;color:#b8c3d2;font-size:12px;font-weight:700}.mc-reading{display:flex;align-items:flex-end;gap:7px;margin-top:18px}.mc-reading strong{font-size:28px;line-height:.9}.mc-reading span{color:#c9d3df;font-size:14px}.mc-muted{display:block;margin-top:16px;color:var(--muted);font-size:14px}.mc-meter{height:5px;margin-top:13px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}.mc-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f91ff,#68fff0)}.mc-center{min-width:0}.mc-map-head{display:flex;justify-content:space-between;align-items:center;margin:3px 6px 10px}.mc-map-head span:last-child{color:#aeb9c7;font-size:13px}.mc-map{position:relative;min-height:480px;aspect-ratio:16/9;border:1px solid rgba(88,135,174,.46);border-radius:8px;overflow:hidden;background:rgba(4,12,22,.72);box-shadow:var(--shadow)}.mc-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.03) brightness(.96)}.mc-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,11,19,.16),rgba(5,14,26,.08)),radial-gradient(circle at 50% 55%,transparent 58%,rgba(2,8,15,.28))}.unit-map{position:absolute;inset:0;z-index:2}.unit-tag{position:absolute;width:132px;padding:9px 10px;border:1px solid rgba(75,172,221,.72);border-radius:4px;background:rgba(7,20,33,.78);box-shadow:0 12px 24px rgba(0,0,0,.36),inset 0 0 18px rgba(88,176,228,.08);backdrop-filter:blur(5px);transform:translate(-50%,-50%);transition:transform .2s ease,border-color .2s ease}.unit-tag.is-active{border-color:rgba(104,255,240,.95);transform:translate(-50%,-50%) scale(1.06)}.unit-tag.warning{border-color:rgba(255,212,80,.88)}.unit-tag header{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px}.unit-dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 11px rgba(79,240,139,.8)}.unit-tag.warning .unit-dot{background:var(--amber);box-shadow:0 0 11px rgba(255,212,80,.75)}.unit-label{display:block;margin-top:4px;color:#cfd8e4;font-size:11px}.unit-load{display:block;margin-top:7px;text-align:right;color:#4ebcff;font-size:16px;font-weight:700}.unit-tag small{display:block;text-align:right;color:#fff;line-height:1.35}.mc-toolbar{display:flex;justify-content:center;gap:10px;margin-top:12px}.mc-bottom{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px;max-width:1760px;margin:18px auto 0}.mc-trend,.mc-events{min-height:150px;padding:16px}.mc-panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:8px}.range{display:flex;border:1px solid rgba(143,169,198,.22);border-radius:999px;overflow:hidden}.range button{border:0;background:transparent;color:#aeb9c6;padding:7px 14px;font-weight:700;font-size:11px}.range button.active{background:#2f73ff;color:#fff}#trend-chart{display:block;width:100%;height:132px}.chart-legend{display:flex;align-items:center;gap:8px;color:#bfccda;font-size:12px}.chart-legend span{width:34px;height:4px;border-radius:999px}.chart-legend .green{background:#4ff08b}.chart-legend .blue{background:#3091ff}.mc-events p{margin:14px 0 0;color:#dce6ef;font-size:15px;line-height:1.4}.mc-events .mc-muted{color:#aab5c5}.mc-entering .app-toolbar,.mc-entering .mc-col,.mc-entering .mc-center,.mc-entering .mc-bottom{opacity:0;transform:translateY(12px)}.app-toolbar,.mc-col,.mc-center,.mc-bottom{transition:opacity .75s ease,transform .75s ease}.mc-ready .app-toolbar,.mc-ready .mc-col,.mc-ready .mc-center,.mc-ready .mc-bottom{opacity:1;transform:none}.mc-ready .mc-center{transition-delay:.1s}.mc-ready .mc-col:nth-child(1){transition-delay:.18s}.mc-ready .mc-col:nth-child(3){transition-delay:.24s}.mc-ready .mc-bottom{transition-delay:.32s}@media(max-width:1180px){.mc-layout{grid-template-columns:1fr;max-width:980px}.mc-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mc-col h3{grid-column:1/-1}.mc-bottom{grid-template-columns:1fr;max-width:980px}.mc-map{min-height:360px}}@media(max-width:760px){.mc-hmi{padding:0 12px 18px}.app-toolbar__rail{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;min-height:74px;padding:0 12px}.app-toolbar__logo{width:104px}.app-toolbar__title{font-size:13px;letter-spacing:.08em;white-space:normal;line-height:1.15}.app-toolbar__actions{gap:6px}.language-toggle{min-height:34px}.language-toggle__button{min-width:30px;min-height:28px;font-size:10px}.app-toolbar__status{min-height:34px;padding:0 9px;font-size:9px;letter-spacing:.08em}.mc-layout{padding-top:92px}.mc-col{grid-template-columns:1fr}.mc-map{min-height:300px;aspect-ratio:4/3}.unit-tag{width:108px;padding:7px}.unit-tag header{font-size:11px}.unit-load{font-size:13px}.unit-tag small,.unit-label{font-size:10px}.mc-toolbar{flex-wrap:wrap}.mc-action{min-height:38px;padding:0 13px;font-size:11px}.mc-panel-head{align-items:flex-start;flex-direction:column}.range button{padding:6px 11px}#trend-chart{height:150px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Liquid glass panels */
.mc-card,.mc-trend,.mc-events,.unit-tag{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 38%,rgba(6,20,36,.34) 100%),
    rgba(8,22,38,.34);
  border-color:rgba(122,214,255,.46);
  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -18px 42px rgba(39,145,215,.1),
    inset 0 0 26px rgba(104,255,240,.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.35) brightness(1.08);
  backdrop-filter:blur(18px) saturate(1.35) brightness(1.08);
}
.mc-card::before,.mc-trend::before,.mc-events::before,.unit-tag::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(120deg,rgba(255,255,255,.16),transparent 32%,rgba(104,255,240,.09) 70%,transparent 100%);
  opacity:.72;
}
.mc-card::after,.mc-trend::after,.mc-events::after,.unit-tag::after{
  content:"";
  position:absolute;
  inset:auto 10px 8px 10px;
  height:1px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(104,255,240,.46),transparent);
  opacity:.65;
}
.mc-card > *,.mc-trend > *,.mc-events > *,.unit-tag > *{position:relative;z-index:1}
.unit-tag{
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 42%,rgba(5,20,34,.3)),
    rgba(5,22,38,.28);
  border-color:rgba(75,190,255,.68);
  box-shadow:
    0 16px 34px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 24px rgba(78,188,255,.14);
  -webkit-backdrop-filter:blur(20px) saturate(1.45) brightness(1.08);
  backdrop-filter:blur(20px) saturate(1.45) brightness(1.08);
}
.unit-tag.is-active,.mc-card.is-active{
  border-color:rgba(104,255,240,.9);
  box-shadow:
    0 0 34px rgba(104,255,240,.18),
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 30px rgba(104,255,240,.14);
}
.unit-tag.warning{
  border-color:rgba(255,213,84,.82);
  box-shadow:
    0 0 28px rgba(255,213,84,.13),
    0 16px 34px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 24px rgba(255,213,84,.1);
}

/* Keep map labels fully visible inside the image frame */
.unit-tag{
  left:clamp(76px,var(--x),calc(100% - 76px))!important;
  top:clamp(54px,var(--y),calc(100% - 54px))!important;
}
@media(max-width:760px){
  .unit-tag{
    left:clamp(62px,var(--x),calc(100% - 62px))!important;
    top:clamp(46px,var(--y),calc(100% - 46px))!important;
  }
}

/* Hard boundary: position labels by their top-left corner so nothing is clipped */
.unit-tag{
  left:clamp(10px,calc(var(--x) - 66px),calc(100% - 142px))!important;
  top:clamp(10px,calc(var(--y) - 48px),calc(100% - 106px))!important;
  transform:none!important;
}
.unit-tag.is-active{
  transform:none!important;
}
@media(max-width:760px){
  .unit-tag{
    left:clamp(8px,calc(var(--x) - 54px),calc(100% - 116px))!important;
    top:clamp(8px,calc(var(--y) - 43px),calc(100% - 96px))!important;
    transform:none!important;
  }
}

/* Compact tags and manual margin for the motocompression panorama */
.unit-tag{
  width:118px!important;
  min-height:84px;
  padding:8px 9px!important;
}
.unit-tag{
  left:clamp(12px,calc(var(--x) - 59px),calc(100% - 130px))!important;
  top:clamp(12px,calc(var(--y) - 42px),calc(100% - 98px))!important;
}
@media(max-width:760px){
  .unit-tag{width:102px!important;min-height:78px}
  .unit-tag{
    left:clamp(8px,calc(var(--x) - 51px),calc(100% - 110px))!important;
    top:clamp(8px,calc(var(--y) - 39px),calc(100% - 90px))!important;
  }
}

/* Staggered page entrance, matching the Intec Dynamic sections */
@keyframes mcFadeUp{
  from{opacity:0;transform:translateY(18px);filter:blur(8px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes mcScaleIn{
  from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes mcHeaderIn{
  from{opacity:0;transform:translateY(-18px);filter:blur(10px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes mcTagIn{
  from{opacity:0;transform:translateY(10px) scale(.94);filter:blur(6px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.mc-entering .app-toolbar,.mc-entering .mc-col h3,.mc-entering .mc-card,.mc-entering .mc-map-head,.mc-entering .mc-map,.mc-entering .mc-toolbar,.mc-entering .mc-bottom,.mc-entering .unit-tag{
  opacity:0;
}
.mc-ready .app-toolbar{
  animation:mcHeaderIn .82s cubic-bezier(.2,.78,.2,1) both;
}
.mc-ready .mc-map-head{
  animation:mcFadeUp .72s cubic-bezier(.2,.78,.2,1) .18s both;
}
.mc-ready .mc-map{
  animation:mcScaleIn .95s cubic-bezier(.2,.78,.2,1) .24s both;
}
.mc-ready .mc-col h3{
  animation:mcFadeUp .68s cubic-bezier(.2,.78,.2,1) .28s both;
}
.mc-ready .mc-card{
  animation:mcFadeUp .72s cubic-bezier(.2,.78,.2,1) both;
}
.mc-ready .mc-col:first-child .mc-card:nth-of-type(1){animation-delay:.34s}
.mc-ready .mc-col:first-child .mc-card:nth-of-type(2){animation-delay:.42s}
.mc-ready .mc-col:first-child .mc-card:nth-of-type(3){animation-delay:.50s}
.mc-ready .mc-col:first-child .mc-card:nth-of-type(4){animation-delay:.58s}
.mc-ready .mc-col:last-child .mc-card:nth-of-type(1){animation-delay:.40s}
.mc-ready .mc-col:last-child .mc-card:nth-of-type(2){animation-delay:.48s}
.mc-ready .mc-col:last-child .mc-card:nth-of-type(3){animation-delay:.56s}
.mc-ready .mc-col:last-child .mc-card:nth-of-type(4){animation-delay:.64s}
.mc-ready .unit-tag{
  animation:mcTagIn .62s cubic-bezier(.2,.78,.2,1) both;
}
.mc-ready .unit-tag:nth-child(1){animation-delay:.54s}
.mc-ready .unit-tag:nth-child(2){animation-delay:.59s}
.mc-ready .unit-tag:nth-child(3){animation-delay:.64s}
.mc-ready .unit-tag:nth-child(4){animation-delay:.69s}
.mc-ready .unit-tag:nth-child(5){animation-delay:.74s}
.mc-ready .unit-tag:nth-child(6){animation-delay:.79s}
.mc-ready .unit-tag:nth-child(7){animation-delay:.84s}
.mc-ready .unit-tag:nth-child(8){animation-delay:.89s}
.mc-ready .unit-tag:nth-child(9){animation-delay:.94s}
.mc-ready .unit-tag:nth-child(10){animation-delay:.99s}
.mc-ready .mc-toolbar{
  animation:mcFadeUp .72s cubic-bezier(.2,.78,.2,1) .72s both;
}
.mc-ready .mc-bottom{
  animation:mcFadeUp .78s cubic-bezier(.2,.78,.2,1) .82s both;
}

/* Run entry animations only while the page is entering; live data refreshes must stay stable */
.mc-ready:not(.mc-entering) .unit-tag,
.mc-ready:not(.mc-entering) .mc-card,
.mc-ready:not(.mc-entering) .mc-map,
.mc-ready:not(.mc-entering) .mc-map-head,
.mc-ready:not(.mc-entering) .mc-toolbar,
.mc-ready:not(.mc-entering) .mc-bottom{
  animation:none!important;
  opacity:1!important;
  filter:none!important;
}

/* 3D compressor viewer */
.mc-map--three{
  background:
    radial-gradient(circle at 48% 42%,rgba(58,218,255,.16),transparent 30%),
    linear-gradient(160deg,rgba(9,25,42,.82),rgba(3,10,18,.92));
}
.mc-three-view{
  position:absolute;
  inset:0;
  z-index:1;
}
.mc-three-view canvas{
  display:block;
  width:100%!important;
  height:100%!important;
}
.mc-model-status{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  transform:translate(-50%,-50%);
  padding:12px 16px;
  border:1px solid rgba(104,255,240,.35);
  border-radius:999px;
  background:rgba(5,17,28,.72);
  color:#dffefa;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.mc-model-status[hidden]{display:none!important}
.mc-map--three .unit-map{display:none!important}
.mc-map--three::after{
  z-index:2;
  background:
    linear-gradient(180deg,rgba(6,16,28,.03),rgba(4,14,25,.08)),
    radial-gradient(circle at 50% 52%,transparent 62%,rgba(1,8,16,.3));
}

/* 3D focus label for variable zoom */
.mc-focus-label{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:4;
  max-width:min(420px,calc(100% - 36px));
  padding:10px 14px;
  border:1px solid rgba(104,255,240,.46);
  border-radius:999px;
  background:rgba(5,18,30,.62);
  color:#eafffb;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  backdrop-filter:blur(14px) saturate(1.35);
  pointer-events:none;
}
.mc-focus-label[hidden]{display:none!important}

/* Light / dark theme toggle */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  border:1px solid rgba(143,169,198,.28);
  border-radius:999px;
  background:rgba(9,18,31,.64);
  padding:0 14px;
  color:#dce8f4;
  text-transform:uppercase;
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.theme-toggle:hover{border-color:rgba(104,255,240,.58);color:#dffff9}
.theme-toggle__icon{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#2f73ff;color:#fff;box-shadow:0 0 18px rgba(47,115,255,.45);font-size:13px;line-height:1}
.theme-light{--text:#0d2234;--muted:#466176;--line:rgba(38,99,132,.28);--shadow:0 24px 70px rgba(15,56,82,.18)}
body.theme-light{
  background:
    radial-gradient(circle at 52% 42%,rgba(83,202,231,.28),transparent 30%),
    radial-gradient(circle at 78% 18%,rgba(65,132,206,.16),transparent 34%),
    linear-gradient(115deg,#dff3ff 0%,#eefaff 48%,#d7ecfb 100%);
  color:var(--text);
}
body.theme-light::before{background:linear-gradient(90deg,rgba(13,67,101,.055) 1px,transparent 1px),linear-gradient(rgba(13,67,101,.05) 1px,transparent 1px);opacity:.5}
body.theme-light .app-toolbar{background:rgba(229,246,255,.78);border-bottom-color:rgba(38,99,132,.18)}
body.theme-light .app-toolbar__title,body.theme-light .mc-col h3,body.theme-light .mc-panel-head h3,body.theme-light .mc-events h3{color:#102235}
body.theme-light .theme-toggle,body.theme-light .app-toolbar__status,body.theme-light .mc-action,body.theme-light .language-toggle{background:rgba(242,250,255,.72);border-color:rgba(38,99,132,.25);color:#17324a}
body.theme-light .language-toggle__button{color:#31536c}
body.theme-light .mc-card,body.theme-light .mc-trend,body.theme-light .mc-events,body.theme-light .unit-tag{
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.28) 44%,rgba(174,221,244,.28)),rgba(239,250,255,.48);
  border-color:rgba(36,133,178,.42);
  box-shadow:0 18px 40px rgba(14,64,96,.16),inset 0 1px 0 rgba(255,255,255,.66),inset 0 0 26px rgba(44,157,202,.1);
}
body.theme-light .mc-tagline,body.theme-light .mc-muted,body.theme-light .mc-reading span,body.theme-light .chart-legend{color:#466176}
body.theme-light .mc-reading strong{color:#102235}
body.theme-light .mc-map{background:rgba(217,240,252,.62);border-color:rgba(36,112,152,.34)}
body.theme-light .mc-map--three{background:radial-gradient(circle at 48% 42%,rgba(77,194,224,.19),transparent 30%),linear-gradient(160deg,rgba(232,247,255,.82),rgba(198,226,242,.84))}
body.theme-light .mc-map--three::after{background:linear-gradient(180deg,rgba(232,247,255,.03),rgba(173,214,237,.08)),radial-gradient(circle at 50% 52%,transparent 62%,rgba(151,194,219,.22))}
body.theme-light .mc-focus-label{background:rgba(238,250,255,.72);color:#123149;border-color:rgba(36,133,178,.42)}
body.theme-light #particles{opacity:.45}
@media(max-width:760px){.theme-toggle{min-height:34px;padding:0 9px;font-size:9px;gap:5px}.theme-toggle__icon{width:22px;height:22px}.theme-toggle__text{display:none}}

/* Motogeneradores HMI */
.mg-hmi .mc-layout{grid-template-columns:240px minmax(520px,1fr) 240px}
.mg-map{min-height:560px;background:radial-gradient(circle at 50% 40%,rgba(69,211,255,.18),transparent 32%),linear-gradient(155deg,rgba(6,22,38,.88),rgba(3,11,20,.96))}
#view canvas{display:block;width:100%!important;height:100%!important}
.hint{position:absolute;left:18px;bottom:16px;z-index:4;max-width:calc(100% - 36px);padding:9px 13px;border:1px solid rgba(104,255,240,.32);border-radius:999px;background:rgba(4,15,27,.56);color:#c8d8e8;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mg-bottom{grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);align-items:start}.mg-explorer{grid-column:1/-1}.mg-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}.mg-control-grid--compact{grid-template-columns:repeat(2,minmax(0,160px));justify-content:start}.mg-explorer .mc-action{width:100%;min-height:38px;padding:0 12px;font-size:11px}.state-info,.tag-help{margin:8px 0;color:var(--muted);font-size:13px;line-height:1.35}.mg-label{display:block;margin:12px 0 6px;color:#dce8f5;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.08em}.mg-input{width:100%;min-height:40px;border:1px solid rgba(122,214,255,.35);border-radius:8px;background:rgba(4,14,25,.72);color:var(--text);padding:0 12px;font:inherit;outline:none}.mg-input:focus{border-color:rgba(104,255,240,.75);box-shadow:0 0 0 3px rgba(104,255,240,.08)}.mg-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:360px;overflow:auto;padding-right:4px}.part-group{border:1px solid rgba(122,214,255,.25);border-radius:8px;padding:10px;background:rgba(5,16,28,.35)}.part-group h3{margin:0 0 8px!important;font-size:12px!important;color:#e8f4ff}.tag-row{display:flex;align-items:center;gap:7px;margin:6px 0}.tag-row input{accent-color:#2f73ff}.tag-row button{width:100%;border:1px solid rgba(143,169,198,.22);border-radius:7px;background:rgba(8,20,34,.7);color:#cdd9e8;padding:7px 8px;text-align:left;font-size:12px}.tag-row button:hover,.tag-row button[aria-pressed="true"]{border-color:rgba(104,255,240,.72);color:#fff}.mg-check{display:flex;align-items:center;gap:8px;margin:12px 0;color:#dbe7f4;font-size:14px}.mg-check input{accent-color:#2f73ff}.mg-info{margin-top:10px;padding-top:10px;border-top:1px solid rgba(143,169,198,.18)}.mg-info h3{margin:0 0 8px!important}.mg-info p{margin:0 0 10px;color:#cbd8e8;line-height:1.45}.mg-info dl{display:grid;grid-template-columns:90px 1fr;gap:6px 10px;margin:0;color:#c7d4e3;font-size:13px}.mg-info dt{color:#8fa3b9;text-transform:uppercase;font-weight:700}.mg-info dd{margin:0}.callouts{position:absolute;inset:0;z-index:5;pointer-events:none}.callouts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.callout{position:absolute;pointer-events:auto;border:1px solid rgba(87,190,232,.62);border-radius:8px;background:rgba(4,17,30,.7);color:#eff8ff;padding:8px 10px;text-align:left;font:700 12px/1.2 D-DIN,Arial,sans-serif;box-shadow:0 12px 28px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.callout[aria-pressed="true"]{border-color:rgba(104,255,240,.9);box-shadow:0 0 24px rgba(104,255,240,.18)}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid rgba(143,169,198,.28);border-radius:999px;background:rgba(13,24,39,.8);padding:0 14px;text-transform:uppercase;font-weight:700;font-size:11px;letter-spacing:.08em}.theme-toggle__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2f73ff;color:#fff;box-shadow:0 0 16px rgba(47,115,255,.38)}
body.theme-light{--bg:#dceef8;--bg2:#cfe7f5;--panel:rgba(255,255,255,.62);--panel2:rgba(238,250,255,.78);--line:rgba(75,137,173,.35);--text:#102235;--muted:#405a72;background:radial-gradient(circle at 52% 42%,rgba(93,202,234,.28),transparent 30%),linear-gradient(115deg,#edf9ff 0%,#d7edf8 52%,#cce5f5 100%);color:var(--text)}body.theme-light .app-toolbar{background:rgba(229,246,255,.78)}body.theme-light .mc-card,body.theme-light .mc-trend,body.theme-light .mc-events,body.theme-light .unit-tag{background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(225,247,255,.42)),rgba(232,249,255,.54);color:var(--text)}body.theme-light .mg-input,body.theme-light .tag-row button,body.theme-light .part-group{background:rgba(255,255,255,.5);color:var(--text)}body.theme-light .mc-map--three{background:radial-gradient(circle at 50% 45%,rgba(104,210,236,.24),transparent 35%),linear-gradient(155deg,rgba(225,245,255,.8),rgba(199,229,246,.9))}body.theme-light .hint,body.theme-light .mc-model-status,body.theme-light .callout{background:rgba(244,252,255,.72);color:#173047}body.theme-light .mc-muted,body.theme-light .state-info{color:#4d657d}
@media(max-width:1180px){.mg-hmi .mc-layout{grid-template-columns:1fr}.mg-tags{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.mg-map{min-height:390px}.hint{display:none}.mg-tags{grid-template-columns:1fr;max-height:300px}.mg-control-grid{grid-template-columns:1fr}.theme-toggle__text{display:none}.theme-toggle{min-height:34px;padding:0 4px}.theme-toggle__icon{width:28px;height:28px}.mg-info dl{grid-template-columns:1fr}}

/* Motogeneradores: operational values separated from gas/fire instruments */
.mg-hmi .mc-layout{
  grid-template-columns:280px minmax(560px,1fr) 280px;
}
.mc-col--operational,
.mc-col--safety{
  gap:8px;
}
.mc-col--operational .mc-card,
.mc-col--safety .mc-card{
  min-height:86px;
  padding:11px 12px;
}
.mc-col--operational .mc-card{
  cursor:default;
}
.mc-col--operational .mc-reading{
  margin-top:9px;
}
.mc-col--operational .mc-reading strong{
  font-size:24px;
}
.mc-col--operational .mc-muted,
.mc-col--safety .mc-muted{
  margin-top:8px;
  font-size:12px;
}
.mc-col--operational .mc-meter{
  margin-top:9px;
}
.mg-safety-card{
  display:block;
  cursor:pointer;
}
.mg-safety-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  color:#dfffee;
  font-size:20px;
  line-height:1;
  letter-spacing:.08em;
}
.status-led{
  display:inline-block;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(79,240,139,.12),0 0 18px rgba(79,240,139,.72);
}
.mg-safety-card.is-activated{
  border-color:rgba(255,106,79,.92);
  box-shadow:0 0 34px rgba(255,106,79,.2),0 18px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 30px rgba(255,106,79,.12);
}
.mg-safety-card.is-activated .mg-safety-status{
  color:#ffddd7;
}
.mg-safety-card.is-activated .status-led{
  background:var(--danger);
  box-shadow:0 0 0 4px rgba(255,106,79,.14),0 0 20px rgba(255,106,79,.88);
}
.mg-safety-card.is-active:not(.is-activated){
  border-color:rgba(104,255,240,.9);
}
.mg-safety-card .mc-tagline span:first-child{
  color:#84d8ff;
}
body.theme-light .mg-safety-status{
  color:#143d2d;
}
body.theme-light .mg-safety-card.is-activated .mg-safety-status{
  color:#8b2418;
}
@media(max-width:1180px){
  .mg-hmi .mc-layout{grid-template-columns:1fr}
  .mc-col--operational,.mc-col--safety{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .mc-col--operational,.mc-col--safety{grid-template-columns:1fr}
  .mc-col--operational .mc-card,.mc-col--safety .mc-card{min-height:88px}
}
.mc-card[data-focus-part]{cursor:pointer}
.mc-card[data-focus-part]:hover{border-color:rgba(104,255,240,.72)}
.mc-card[data-focus-part]:focus-visible{outline:2px solid rgba(104,255,240,.85);outline-offset:3px}
body.theme-light .mc-card[data-focus-part]:hover{border-color:rgba(36,133,178,.58)}


.mg-focus-callout{position:absolute;z-index:7;pointer-events:none;max-width:220px;transition:left .12s linear,top .12s linear}
.mg-focus-callout[hidden]{display:none!important}
.mg-focus-callout__label{display:block;padding:8px 11px;border:1px solid rgba(85,232,209,.72);border-radius:6px;background:rgba(3,18,30,.76);color:#effffb;box-shadow:0 8px 22px rgba(0,0,0,.28);font:700 11px/1.2 D-DIN,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mg-focus-callout__line{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;overflow:visible}
body.theme-light .mg-focus-callout__label{background:rgba(241,252,255,.82);color:#173047;border-color:rgba(36,133,178,.58)}
.mg-tag-lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible}.mg-tag-lines[hidden]{display:none!important}
.mg-tag-layer{position:absolute;inset:0;z-index:4;pointer-events:none}.mg-tag-layer[hidden]{display:none!important}.mg-tag{position:absolute;padding:4px 7px;border:1px solid rgba(104,255,240,.6);border-radius:4px;background:rgba(3,18,30,.72);color:#dffefa;font:700 10px/1 D-DIN,Arial,sans-serif;letter-spacing:.06em;box-shadow:0 5px 14px rgba(0,0,0,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mg-tag[hidden]{display:none!important}body.theme-light .mg-tag{background:rgba(241,252,255,.8);color:#173047;border-color:rgba(36,133,178,.58)}
.viewer-icon-controls{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
}
.viewer-icon-button{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(104,255,240,.34);
  border-radius:999px;
  background:rgba(4,15,27,.58);
  color:#dffefa;
  box-shadow:0 12px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  cursor:pointer;
}
.viewer-icon-button span{
  display:block;
  font-size:20px;
  line-height:1;
}
.viewer-icon-button:hover,.viewer-icon-button[aria-pressed="true"]{
  border-color:rgba(104,255,240,.82);
  color:#fff;
  box-shadow:0 0 22px rgba(104,255,240,.18),0 12px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14);
}
.viewer-icon-button:disabled{
  opacity:.65;
  cursor:wait;
}
.viewer-icon-button[data-mode="transparente"]{
  color:#8fffe8;
}
.viewer-icon-button[data-mode="oculto"]{
  color:#ffd450;
}
body.theme-light .viewer-icon-button{
  background:rgba(244,252,255,.76);
  color:#173047;
  border-color:rgba(36,133,178,.34);
  box-shadow:0 12px 24px rgba(14,64,96,.14),inset 0 1px 0 rgba(255,255,255,.55);
}
body.theme-light .viewer-icon-button:hover,body.theme-light .viewer-icon-button[aria-pressed="true"]{
  border-color:rgba(8,124,255,.58);
  box-shadow:0 0 18px rgba(8,124,255,.13),0 12px 24px rgba(14,64,96,.14),inset 0 1px 0 rgba(255,255,255,.68);
}
@media(max-width:760px){.mg-focus-callout{position:absolute;z-index:7;pointer-events:none;max-width:220px;transition:left .12s linear,top .12s linear}
.mg-focus-callout[hidden]{display:none!important}
.mg-focus-callout__label{display:block;padding:8px 11px;border:1px solid rgba(85,232,209,.72);border-radius:6px;background:rgba(3,18,30,.76);color:#effffb;box-shadow:0 8px 22px rgba(0,0,0,.28);font:700 11px/1.2 D-DIN,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mg-focus-callout__line{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;overflow:visible}
body.theme-light .mg-focus-callout__label{background:rgba(241,252,255,.82);color:#173047;border-color:rgba(36,133,178,.58)}
.mg-tag-lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible}.mg-tag-lines[hidden]{display:none!important}
.mg-tag-layer{position:absolute;inset:0;z-index:4;pointer-events:none}.mg-tag-layer[hidden]{display:none!important}.mg-tag{position:absolute;padding:4px 7px;border:1px solid rgba(104,255,240,.6);border-radius:4px;background:rgba(3,18,30,.72);color:#dffefa;font:700 10px/1 D-DIN,Arial,sans-serif;letter-spacing:.06em;box-shadow:0 5px 14px rgba(0,0,0,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mg-tag[hidden]{display:none!important}body.theme-light .mg-tag{background:rgba(241,252,255,.8);color:#173047;border-color:rgba(36,133,178,.58)}
.viewer-icon-controls{left:12px;bottom:12px}.viewer-icon-button{width:38px;height:38px}.viewer-icon-button span{font-size:18px}}
@media(max-width:760px){
  .mg-map{
    width:100%;
    height:clamp(220px,68vw,300px)!important;
    min-height:0!important;
    aspect-ratio:16/10!important;
  }
  .mg-map canvas{width:100%!important;height:100%!important}
}