:root{
  --fondo:#0e1218; --panel:#161c26; --panel2:#1d2531; --linea:#2a3444; --texto:#e8edf5; --suave:#93a1b6;
  --acento:#ffb020; --acento2:#2bc4ff; --bien:#3ddc84; --mal:#ff5a5f; --radio:10px;
}
:root[data-tema="claro"]{--fondo:#eef1f6;--panel:#ffffff;--panel2:#f3f5f9;--linea:#d5dbe6;--texto:#18202c;--suave:#5b6779}
@media (prefers-color-scheme: light){:root:not([data-tema="oscuro"]){--fondo:#eef1f6;--panel:#ffffff;--panel2:#f3f5f9;--linea:#d5dbe6;--texto:#18202c;--suave:#5b6779}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--fondo);color:var(--texto);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{background:var(--panel2);border:1px solid var(--linea);border-radius:8px;padding:6px 12px;cursor:pointer;transition:background .12s,border-color .12s}
button:hover{border-color:var(--acento2)}
button:disabled{opacity:.4;cursor:default}
button.primario{background:var(--acento);color:#1b1300;border-color:var(--acento);font-weight:700}
button.peligro{border-color:var(--mal);color:var(--mal)}
button.act{background:var(--acento2);border-color:var(--acento2);color:#001824;font-weight:700}
input,select{background:var(--panel2);border:1px solid var(--linea);border-radius:8px;padding:6px 8px;min-width:0}
input[type=range]{padding:0;accent-color:var(--acento)}
input[type=checkbox]{accent-color:var(--acento);width:16px;height:16px}

#barra{display:flex;gap:12px;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--linea);flex-wrap:wrap}
.marca{display:flex;flex-direction:column;line-height:1.05;margin-right:4px}
.logo{font-weight:900;letter-spacing:.06em;font-size:16px}.logo b{color:var(--acento);margin-left:2px}
.sub{font-size:11px;color:var(--suave)}
.nombre{width:min(260px,30vw);font-weight:600}
.grupo{display:flex;gap:6px;align-items:center}.der{margin-left:auto}
.usuario{color:var(--suave);font-size:13px;margin:0 4px}

#cuerpo{flex:1;display:grid;grid-template-columns:236px 1fr 280px;min-height:0}
#paleta,#inspector{background:var(--panel);overflow:auto;padding:12px}
#paleta{border-right:1px solid var(--linea)}#inspector{border-left:1px solid var(--linea)}
.herramientas{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ayuda{color:var(--suave);font-size:12px;margin:8px 0 12px}
.grupoPaleta{margin-bottom:14px}
.grupoPaleta h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--suave)}
.items{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.item{background:var(--panel2);border:1px solid var(--linea);border-radius:var(--radio);padding:8px 6px;text-align:center;cursor:grab;user-select:none;font-size:12px;transition:transform .1s,border-color .12s}
.item:hover{border-color:var(--acento);transform:translateY(-1px)}
.item.armado{border-color:var(--acento);box-shadow:0 0 0 2px color-mix(in srgb,var(--acento) 40%,transparent)}
.item.usado{opacity:.55}
.item .ic{display:block;font-size:22px;line-height:1.2}

#lienzo{position:relative;min-width:0;min-height:0;background:#0b0f15}
#mapa,#vista3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#estado{position:absolute;left:10px;bottom:8px;font-size:12px;color:#c6d2e3;background:rgba(10,14,20,.7);padding:3px 8px;border-radius:6px;pointer-events:none;font-variant-numeric:tabular-nums}
#avisos{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;max-width:min(420px,70%)}
.av{background:rgba(255,90,95,.14);border:1px solid var(--mal);color:#ffd4d6;padding:5px 9px;border-radius:8px;font-size:12px}
.av.info{background:rgba(43,196,255,.12);border-color:var(--acento2);color:#cfeeff}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:34px;height:34px;padding:0;font-size:18px;background:rgba(22,28,38,.85)}

#inspector h3{margin:0 0 10px;font-size:15px}
.campo{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;margin-bottom:10px}
.campo label{color:var(--suave);font-size:12px}
.campo .valor{font-variant-numeric:tabular-nums;font-size:12px}
.campo input[type=range],.campo select,.campo input[type=text],.campo input[type=number]{grid-column:1/-1;width:100%}
.fila{display:flex;gap:6px;margin-bottom:10px}.fila button{flex:1}
.separador{height:1px;background:var(--linea);margin:12px 0}
.chip{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--linea);font-size:11px;color:var(--suave)}
.check{display:flex;align-items:center;gap:8px;margin-bottom:8px}

#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
#modal[hidden]{display:none}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:18px;width:min(460px,100%);max-height:86vh;overflow:auto}
.tarjeta h2{margin:0 0 12px;font-size:18px}
.tarjeta .campo{margin-bottom:12px}
.lista .fila-mapa{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:9px 10px;border:1px solid var(--linea);border-radius:10px;margin-bottom:8px;align-items:center}
.lista .fila-mapa small{color:var(--suave)}
.error{color:var(--mal);font-size:12px;min-height:16px}
#aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--linea);padding:9px 16px;border-radius:10px;z-index:20;box-shadow:0 6px 24px rgba(0,0,0,.4)}
#aviso[hidden]{display:none}

@media (max-width:980px){
  #cuerpo{grid-template-columns:190px 1fr 230px}
  .nombre{width:150px}
}
@media (max-width:760px){
  body{overflow:auto}
  #cuerpo{grid-template-columns:1fr;grid-template-rows:260px 62vh auto}
  #paleta{border-right:0;border-bottom:1px solid var(--linea)}
  #inspector{border-left:0;border-top:1px solid var(--linea)}
}

.vistas{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;gap:4px;background:rgba(22,28,38,.85);padding:4px;border-radius:10px;border:1px solid var(--linea);z-index:2}
.vistas button{padding:4px 12px;border-radius:7px}
#vista3d{outline:none}
.etiqueta3d{position:absolute;pointer-events:none;font-size:11px;color:#fff;background:rgba(10,14,20,.7);padding:1px 6px;border-radius:5px;transform:translate(-50%,-130%);white-space:nowrap}

.vistas button.primario{font-weight:700}
#hudProbar{position:absolute;left:0;right:0;bottom:0;pointer-events:none;display:none;color:#fff;font-variant-numeric:tabular-nums;z-index:3}
#hudProbar .vel{position:absolute;left:16px;bottom:44px;font-size:54px;font-weight:900;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.7)}
#hudProbar .vel small{font-size:16px;font-weight:600;margin-left:4px;opacity:.85}
#hudProbar .vuelta{position:absolute;right:16px;top:60px;text-align:right;font-size:18px;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.7)}
#hudProbar .msg{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:42px;font-weight:900;color:#ffd23f;text-shadow:0 3px 10px rgba(0,0,0,.8);opacity:0;transition:opacity .25s}
#hudProbar .ayuda{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;opacity:.85;text-shadow:0 1px 4px #000}

/* ---- pantalla de login */
body.sinsesion #barra, body.sinsesion #cuerpo{display:none}
#login{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
  background:radial-gradient(1200px 600px at 20% 10%,color-mix(in srgb,var(--acento2) 16%,transparent),transparent 60%),
             radial-gradient(900px 500px at 90% 100%,color-mix(in srgb,var(--acento) 14%,transparent),transparent 60%),var(--fondo)}
#login[hidden]{display:none}
.loginCaja{width:min(380px,100%);background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:26px 24px 20px;box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px}
.loginMarca{display:flex;flex-direction:column;align-items:center;line-height:1.1;margin-bottom:2px}
.loginMarca .logo{font-size:26px}.loginMarca .sub{margin-top:4px}
.loginCaja h1{font-size:18px;margin:6px 0 0;text-align:center}
.loginCaja label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--suave)}
.loginCaja input{font-size:15px;padding:10px 11px}
.loginCaja .error{min-height:18px;text-align:center}
.loginCaja button.primario{padding:11px;font-size:15px}
.loginCaja button.enlace{background:none;border:none;color:var(--acento2);padding:4px;text-decoration:underline;cursor:pointer}
.loginPie{margin:2px 0 0;font-size:11px;color:var(--suave);text-align:center}
.loginCaja label[hidden]{display:none}