﻿.tracking-actions{display:flex;align-items:center;gap:10px}.immersive-toggle{padding:7px 9px;border:1px solid #48693a;border-radius:7px;background:#182514;color:var(--lime);font:700 7px var(--mono);letter-spacing:.05em;cursor:pointer}.immersive-hint{position:absolute;z-index:80;left:50%;top:50%;width:min(340px,calc(100% - 36px));transform:translate(-50%,-50%);padding:18px;border:1px solid #71963b;border-radius:12px;background:rgba(8,22,17,.96);box-shadow:0 24px 90px rgba(0,0,0,.6);text-align:center;color:var(--text)}.immersive-hint b{color:var(--lime);font:700 10px var(--mono);letter-spacing:.08em}.immersive-hint p{position:static!important;margin:10px 0 7px!important;color:#d7e1dd!important;font:11px/1.55 var(--sans)!important}.immersive-hint span{display:block;color:#8da098;font:8px/1.5 var(--mono)}.immersive-hint button{margin-top:14px;padding:9px 20px;border:0;border-radius:7px;background:var(--lime);color:#10200b;font-weight:800;cursor:pointer}
body.immersive-control{height:100vh;height:100dvh;overflow:hidden;background:#06100d}body.immersive-control>header,body.immersive-control .notice,body.immersive-control .vehicle-picker,body.immersive-control .lease-card,body.immersive-control .mode-card,body.immersive-control .safety-checks{display:none}body.immersive-control main{width:100%;max-width:none;height:100%;margin:0;padding:0}body.immersive-control .tracking-card{position:fixed;z-index:40;inset:0;margin:0;border:0;border-radius:0;background:#06100d}body.immersive-control .tracking-head{position:absolute;z-index:55;left:0;right:0;top:0;height:58px;padding:10px 12px;background:linear-gradient(180deg,rgba(5,15,12,.96),rgba(5,15,12,.62));border:0}body.immersive-control .tracking-actions{gap:7px}body.immersive-control .immersive-toggle{border-color:#7b4747;background:rgba(48,18,20,.82);color:#ff9b9f}body.immersive-control .tracking-view{position:absolute;inset:0;height:auto}body.immersive-control .tracking-grid{background-size:34px 34px}body.immersive-control .safe-zone{width:min(62vw,430px);height:min(62vw,430px)}body.immersive-control .forklift-shape{transform:translate(-50%,-50%) scale(1.12)}body.immersive-control .sensor-strip{position:absolute;z-index:56;left:0;right:0;bottom:0;background:rgba(32,58,49,.72);backdrop-filter:blur(8px)}body.immersive-control .sensor-strip span{background:rgba(8,21,17,.7)}body.immersive-control .controls-card{position:fixed;z-index:60;inset:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible;pointer-events:none}body.immersive-control .controls-head{position:absolute;z-index:63;left:10px;top:64px;padding:8px 10px;border:1px solid rgba(102,230,173,.25);border-radius:8px;background:rgba(7,20,16,.6);backdrop-filter:blur(7px);pointer-events:none}body.immersive-control .controls-head .heartbeat{margin-left:12px}body.immersive-control .control-layout{display:block;padding:0}body.immersive-control .dpad{position:fixed;z-index:64;left:12px;bottom:94px;display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,54px);gap:5px;pointer-events:auto}body.immersive-control .dpad .command,body.immersive-control .lift-controls .command{border-color:rgba(185,244,75,.55);background:rgba(12,35,27,.58);box-shadow:0 6px 24px rgba(0,0,0,.23);backdrop-filter:blur(5px);color:#f0f6f3}body.immersive-control .dpad .stop{border-color:rgba(255,115,121,.7);background:rgba(60,18,22,.65);color:#ff9ca1}body.immersive-control .command.pressed{background:rgba(185,244,75,.92);color:#10200b}body.immersive-control .lift-controls{position:fixed;z-index:64;right:12px;bottom:96px;width:74px;display:grid;grid-template-columns:1fr;grid-template-rows:auto 56px auto 56px;gap:6px;pointer-events:auto}body.immersive-control .lift-controls>small{grid-column:1;grid-row:1;padding:5px;border-radius:5px;background:rgba(7,20,16,.62)}body.immersive-control .lift-controls>button:first-of-type{grid-column:1;grid-row:2;min-height:0}body.immersive-control .lift-controls>div{grid-column:1;grid-row:3;padding:5px;border-radius:5px;background:rgba(7,20,16,.65);backdrop-filter:blur(5px)}body.immersive-control .lift-controls>button:last-of-type{grid-column:1;grid-row:4;min-height:0}body.immersive-control .deadman{position:fixed;z-index:66;left:50%;bottom:44px;width:min(48vw,370px);margin:0;transform:translateX(-50%);border-color:rgba(185,244,75,.72);background:rgba(25,46,18,.75);backdrop-filter:blur(7px);pointer-events:auto}body.immersive-control .deadman.active{background:rgba(185,244,75,.94)}body.immersive-control .emergency{position:fixed;z-index:66;right:12px;top:64px;width:auto;margin:0;padding:10px 12px;background:rgba(58,18,22,.82);backdrop-filter:blur(7px);pointer-events:auto}body.immersive-control .tracking-label{background:rgba(12,35,28,.72)}

/* Joystick e Layout Ergonômico de Duas Mãos */
.joystick-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  margin: auto;
  position: relative;
  touch-action: none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
.joystick-ring {
  width: 120px;
  height: 120px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: rgba(16, 33, 28, 0.4);
  backdrop-filter: blur(8px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.joystick-knob {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--lime), #4ca980);
  box-shadow: 0 4px 16px rgba(185, 244, 75, 0.4);
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  touch-action: none;
  cursor: pointer;
  transition: transform 45ms linear;
}

/* Ocultação do Dead-man Switch em todo o Portal */
.deadman {
  display: none !important;
}

/* Oculta DPAD em Touch Profile */
body.input-touch #dpadContainer {
  display: none;
}
body.input-touch #joystickZone {
  display: flex;
}
#joystickZone {
  display: none;
}

/* Joystick e Garfos no Modo Imersivo para Mobile (Simetria Bilateral) */
body.immersive-control.input-touch #joystickZone {
  display: flex;
  position: fixed;
  z-index: 64;
  left: 20px;
  bottom: 40px;
}
body.immersive-control.input-touch .lift-controls {
  right: 20px !important;
  bottom: 40px !important;
  z-index: 64;
}

@media(max-width:620px){.tracking-actions .latency{display:none}.immersive-toggle{padding:7px;font-size:6px}body.immersive-control .dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,50px);bottom:86px}body.immersive-control .lift-controls{bottom:88px}body.immersive-control .deadman{bottom:41px;width:58vw;font-size:7px}body.immersive-control .sensor-strip span{padding:7px 3px;font-size:6px}body.immersive-control .controls-head{top:61px;max-width:55%}body.immersive-control .emergency{top:62px;font-size:7px}body.immersive-control .person{right:13%;top:24%}body.immersive-control .pallet{left:8%;bottom:26%}}
@media(max-height:520px) and (orientation:landscape){body.immersive-control .dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,43px);bottom:42px}body.immersive-control .lift-controls{bottom:44px;grid-template-rows:auto 43px auto 43px}body.immersive-control .deadman{bottom:8px;width:38vw;padding:9px}body.immersive-control .sensor-strip{display:none}body.immersive-control .controls-head{top:58px}body.immersive-control .emergency{top:60px}.immersive-hint{width:360px;padding:14px}.immersive-hint p{margin-block:7px!important}}

/* Prioridade responsiva: visão, direção, lift, dead-man e emergência nunca saem da área útil. */
body.immersive-control{width:100vw;min-height:100svh;min-height:100dvh;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.immersive-control .tracking-head{height:calc(58px + env(safe-area-inset-top));padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
body.immersive-control .controls-head{left:calc(10px + env(safe-area-inset-left));top:calc(64px + env(safe-area-inset-top))}
body.immersive-control .emergency{right:calc(12px + env(safe-area-inset-right));top:calc(64px + env(safe-area-inset-top))}
body.immersive-control .dpad{left:calc(12px + env(safe-area-inset-left));bottom:calc(94px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,clamp(46px,14vw,58px));grid-template-rows:repeat(3,clamp(44px,13vw,54px))}
body.immersive-control .lift-controls{right:calc(12px + env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));width:clamp(64px,18vw,78px)}
body.immersive-control .deadman{bottom:calc(44px + env(safe-area-inset-bottom))}
body.immersive-control .sensor-strip{padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:360px){body.immersive-control .tracking-head small,body.immersive-control .controls-head .heartbeat{display:none}body.immersive-control .dpad{left:calc(7px + env(safe-area-inset-left));gap:4px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,43px)}body.immersive-control .lift-controls{right:calc(7px + env(safe-area-inset-right));width:60px}body.immersive-control .deadman{width:54vw;padding-inline:6px;font-size:6px}body.immersive-control .emergency{right:calc(7px + env(safe-area-inset-right));padding-inline:8px}body.immersive-control .tracking-label.left,body.immersive-control .tracking-label.right{display:none}}
@media(min-width:768px) and (min-height:600px){body.immersive-control .dpad{grid-template-columns:repeat(3,72px);grid-template-rows:repeat(3,66px);gap:7px;bottom:110px}body.immersive-control .lift-controls{width:94px;bottom:112px;grid-template-rows:auto 68px auto 68px}body.immersive-control .deadman{width:min(42vw,430px);bottom:52px;padding:16px}body.immersive-control .sensor-strip span{padding:13px 8px;font-size:8px}body.immersive-control .forklift-shape{transform:translate(-50%,-50%) scale(1.35)}}
@media(max-height:430px){body.immersive-control .tracking-head small,body.immersive-control .controls-head,body.immersive-control .tracking-label.left,body.immersive-control .tracking-label.right{display:none}body.immersive-control .dpad{bottom:calc(34px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,39px)}body.immersive-control .lift-controls{bottom:calc(36px + env(safe-area-inset-bottom));width:62px;grid-template-rows:auto 39px auto 39px}body.immersive-control .deadman{bottom:calc(5px + env(safe-area-inset-bottom));width:34vw;padding:7px;font-size:6px}body.immersive-control .sensor-strip{display:none}body.immersive-control .emergency{top:calc(59px + env(safe-area-inset-top))}}

/* Cockpit móvel: ocupa somente a viewport útil e não sobrepõe os controles. */
@media (pointer:coarse) and (orientation:portrait){
  body.immersive-control{position:fixed;inset:0;overscroll-behavior:none}
  body.immersive-control .tracking-head{height:calc(48px + env(safe-area-inset-top));padding:calc(7px + env(safe-area-inset-top)) 10px 6px}
  body.immersive-control .tracking-head>span:first-child small,body.immersive-control .tracking-actions .latency{display:none}
  body.immersive-control .tracking-head b{font-size:8px}
  body.immersive-control .controls-head{top:calc(54px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));max-width:48%;padding:7px 8px}
  body.immersive-control .controls-head strong{font-size:8px;line-height:1.35}
  body.immersive-control .controls-head .heartbeat{display:none}
  body.immersive-control .emergency{top:calc(54px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));max-width:43%;padding:10px 9px;font-size:7px}
  body.immersive-control .warehouse-route,body.immersive-control .tracking-status,body.immersive-control .forklift-shape{display:none}
  body.immersive-control .sensor-strip{top:calc(108px + env(safe-area-inset-top));bottom:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px 6px;background:rgba(7,20,16,.82)}
  body.immersive-control .sensor-strip span{min-width:0;padding:6px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.immersive-control.input-touch #joystickZone{left:50%;bottom:calc(88px + env(safe-area-inset-bottom));width:min(76vw,320px);height:min(76vw,320px);transform:translateX(-50%)}
  body.immersive-control.input-touch .joystick-ring{width:min(68vw,280px);height:min(68vw,280px)}
  body.immersive-control.input-touch .joystick-knob{width:72px;height:72px;left:calc(50% - 36px);top:calc(50% - 36px)}
  body.immersive-control .hold-to-move{bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 24px);padding:9px;font-size:7px}
  body.immersive-control .immersive-hint{position:fixed;top:calc(174px + env(safe-area-inset-top));bottom:auto;width:calc(100% - 28px);padding:12px 14px;transform:translateX(-50%);text-align:left}
  body.immersive-control .immersive-hint p{margin:6px 0 3px!important;font-size:10px!important;line-height:1.35!important}
  body.immersive-control .immersive-hint span{font-size:7px}
  body.immersive-control .immersive-hint button{position:absolute;right:12px;top:12px;margin:0;padding:7px 10px;font-size:9px}
  body.immersive-control .immersive-hint b{display:block;padding-right:76px}
}

@media (pointer:coarse) and (orientation:landscape){
  body.immersive-control{position:fixed;inset:0;overscroll-behavior:none}
  body.immersive-control .warehouse-route,body.immersive-control .tracking-status,body.immersive-control .forklift-shape{display:none}
  body.immersive-control .sensor-strip{left:50%;right:auto;top:calc(54px + env(safe-area-inset-top));bottom:auto;width:42%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px}
  body.immersive-control.input-touch #joystickZone{left:25%;bottom:calc(18px + env(safe-area-inset-bottom));width:min(58vh,300px);height:min(58vh,300px);transform:translateX(-50%)}
  body.immersive-control.input-touch .joystick-ring{width:min(52vh,270px);height:min(52vh,270px)}
  body.immersive-control .hold-to-move{left:75%;bottom:calc(16px + env(safe-area-inset-bottom));width:42%}
  body.immersive-control .emergency{top:calc(60px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:24%;max-width:210px}
  body.immersive-control .immersive-hint{top:52%;width:min(360px,45vw);padding:12px}
}

/* Slider permanece interativo dentro do cartão imersivo com pointer-events bloqueado. */
body.immersive-control .speed-control{position:fixed;z-index:67;left:50%;top:150px;width:min(440px,calc(100% - 24px));margin:0;padding:8px 12px;border:1px solid rgba(102,230,173,.34);border-radius:9px;background:rgba(7,24,18,.9);transform:translateX(-50%);pointer-events:auto;touch-action:none}
body.immersive-control .speed-control input{min-height:28px;pointer-events:auto;touch-action:none;cursor:ew-resize}
body.immersive-control .control-layout,body.immersive-control .joystick-zone,body.immersive-control .joystick-ring,body.immersive-control .joystick-knob{pointer-events:auto}
@media (pointer:coarse) and (orientation:portrait){
  body.immersive-control .speed-control{top:calc(52px + env(safe-area-inset-top));width:calc(100% - 24px);padding:6px 10px}
  body.immersive-control .speed-control small{display:none}
  body.immersive-control .controls-head,body.immersive-control .emergency{top:calc(112px + env(safe-area-inset-top))}
  body.immersive-control .sensor-strip{top:calc(164px + env(safe-area-inset-top))}
  body.immersive-control .immersive-hint{top:calc(220px + env(safe-area-inset-top))}
  body.immersive-control .tracking-status{display:grid;position:fixed;z-index:67;left:12px;right:12px;top:calc(220px + env(safe-area-inset-top));bottom:auto}
  body.immersive-control .immersive-hint{top:calc(300px + env(safe-area-inset-top));z-index:75}
}
@media (pointer:coarse) and (orientation:landscape){
  body.immersive-control .speed-control{left:50%;top:calc(6px + env(safe-area-inset-top));width:36%;padding:5px 9px}
  body.immersive-control .speed-control small{display:none}
}
