﻿/* Entrada adaptativa: o mesmo intertravamento atende teclado, mouse e touch. */
.input-profile{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border:1px solid #315044;border-radius:10px;background:linear-gradient(135deg,rgba(102,230,173,.1),rgba(9,24,19,.96))}
.input-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(185,244,75,.42);border-radius:8px;background:#11271f;color:var(--lime);font-size:16px}
.input-profile small{display:block;color:var(--muted);font:7px var(--mono);letter-spacing:.08em}
.input-profile b{font:9px var(--mono);letter-spacing:.05em}
.input-status{color:var(--mint);font:7px var(--mono)}
.keyboard-guide{display:flex;flex-wrap:wrap;gap:6px;padding:9px 14px 0;color:#9badA6;font:7px var(--mono)}
.keyboard-guide span{padding:6px 8px;border:1px solid #29443a;border-radius:6px;background:#091713}
.keyboard-guide kbd{padding:2px 4px;border:1px solid #4c685d;border-bottom-width:2px;border-radius:4px;background:#142820;color:var(--text);font:7px var(--mono)}
body.input-touch .keyboard-guide{display:none}
body.input-touch .input-profile{border-color:#365749}
.command.key-pressed{background:var(--lime);color:#11200a;transform:scale(.97);box-shadow:0 0 0 2px rgba(185,244,75,.18)}
body.immersive-control .input-profile{display:none}
body.immersive-control .keyboard-guide{position:fixed;z-index:65;left:50%;top:64px;transform:translateX(-50%);justify-content:center;width:min(620px,62vw);padding:0;pointer-events:none}
body.immersive-control .keyboard-guide span{background:rgba(7,20,16,.72);backdrop-filter:blur(7px)}
body.input-touch.immersive-control .keyboard-guide{display:none}
@media(max-width:620px){.input-profile{grid-template-columns:auto 1fr}.input-status{display:none}.keyboard-guide{display:none}}
@media(max-height:520px) and (orientation:landscape){body.immersive-control .keyboard-guide{top:59px;width:58vw}body.immersive-control .keyboard-guide span{padding:4px 6px}}

/* Localização por blocos e estado confirmado do movimento. */
.tracking-view{display:grid;place-items:center;min-height:290px}
.warehouse-route{position:absolute;z-index:4;left:7%;right:7%;top:20%;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}
.warehouse-route>span{display:grid;place-items:center;min-height:72px;border:1px solid #365248;border-radius:12px;background:rgba(12,31,25,.88);color:var(--text);font:700 15px var(--mono)}
.warehouse-route>span small{margin-top:4px;color:var(--muted);font:7px var(--mono)}
.warehouse-route>span.active{border-color:var(--lime);background:rgba(49,76,28,.9);box-shadow:0 0 20px rgba(185,244,75,.2)}
.warehouse-route>i{width:26px;height:1px;background:#456458}
.tracking-view .forklift-shape{top:62%;transition:transform .18s ease}
.tracking-view .forklift-shape[data-direction="FRENTE"]{transform:translate(-50%,-50%) rotate(0deg)}
.tracking-view .forklift-shape[data-direction="FRENTE_DIREITA"]{transform:translate(-50%,-50%) rotate(45deg)}
.tracking-view .forklift-shape[data-direction="DIREITA"]{transform:translate(-50%,-50%) rotate(90deg)}
.tracking-view .forklift-shape[data-direction="RE_DIREITA"]{transform:translate(-50%,-50%) rotate(135deg)}
.tracking-view .forklift-shape[data-direction="RÉ"]{transform:translate(-50%,-50%) rotate(180deg)}
.tracking-view .forklift-shape[data-direction="RE_ESQUERDA"]{transform:translate(-50%,-50%) rotate(225deg)}
.tracking-view .forklift-shape[data-direction="ESQUERDA"]{transform:translate(-50%,-50%) rotate(-90deg)}
.tracking-view .forklift-shape[data-direction="FRENTE_ESQUERDA"]{transform:translate(-50%,-50%) rotate(-45deg)}
.tracking-status{position:absolute;z-index:6;left:12px;right:12px;bottom:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tracking-status>span{padding:8px;border:1px solid #29443a;border-radius:7px;background:rgba(7,20,16,.88);text-align:center}
.tracking-status small,.tracking-status b{display:block}.tracking-status small{color:var(--muted);font:6px var(--mono)}.tracking-status b{margin-top:3px;font:8px var(--mono);color:var(--mint)}
.sensor-strip b{display:block;margin-top:3px;color:var(--text);font:6px var(--mono)}
.hold-to-move{margin:0 14px 9px;padding:10px;border:1px solid #365749;border-radius:8px;background:#0c1c17;color:var(--mint);text-align:center;font:700 8px var(--mono);letter-spacing:.03em}
.joystick-knob[data-state="pending"]{box-shadow:0 0 0 5px rgba(255,199,102,.18),0 4px 16px rgba(255,199,102,.45)}
.joystick-knob[data-state="confirmed"],.joystick-knob[data-state="telemetry"]{box-shadow:0 0 0 5px rgba(102,230,173,.15),0 4px 16px rgba(185,244,75,.4)}
body.immersive-control .tracking-status{bottom:46px}
body.immersive-control .warehouse-route{top:21%}
body.immersive-control .hold-to-move{position:fixed;z-index:66;left:50%;bottom:8px;width:min(60vw,440px);margin:0;transform:translateX(-50%);background:rgba(7,24,18,.84);pointer-events:none}
body.immersive-control.input-touch #joystickZone{left:50%;bottom:95px;transform:translateX(-50%)}
@media(max-width:520px){.warehouse-route{left:4%;right:4%;gap:5px}.warehouse-route>span{min-height:58px}.warehouse-route>i{width:12px}.tracking-status{grid-template-columns:1fr 1fr 1fr}.control-layout{grid-template-columns:1fr}.hold-to-move{font-size:7px}}

/* Limites rígidos para o portal móvel: nenhum cartão ou ação pode ampliar a viewport. */
html,body{max-width:100%;overflow-x:hidden}
main,.vehicle-picker,.input-profile,.lease-card,.tracking-card,.mode-card,.controls-card{width:100%;min-width:0}
.lease-card>div,.tracking-head>span,.tracking-actions{min-width:0}
@media(max-width:520px){
  .lease-card{align-items:stretch;flex-direction:column}
  .lease-card button{width:100%}
  .tracking-head{gap:8px;padding-inline:10px}
  .tracking-head>span:first-child{flex:1}
  .immersive-toggle{max-width:112px;white-space:normal}
  .warehouse-route{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .warehouse-route>i{display:none}
  .warehouse-route>span{min-width:0;padding-inline:3px}
  .tracking-status{left:6px;right:6px;gap:3px}
  .tracking-status>span{min-width:0;padding-inline:2px;font-size:5px;overflow-wrap:anywhere}
}
