*{box-sizing:border-box}
html,body,#cesiumContainer{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:#05090d;color:#fff}
.cesium-viewer-bottom,.cesium-viewer-toolbar{z-index:3}
.overlay{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,rgba(12,38,58,.55),rgba(2,6,10,.92));
  backdrop-filter:blur(8px)
}
.card{
  width:min(720px,calc(100vw - 32px));padding:30px;border-radius:22px;
  background:linear-gradient(180deg,rgba(15,24,32,.97),rgba(7,12,18,.97));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 100px rgba(0,0,0,.55)
}
.setup-card{max-height:calc(100vh - 30px);overflow:auto}
.badge,.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:#76d7ff}
h1{font-size:40px;line-height:1;margin:14px 0}
h2{margin:12px 0}
p{color:#c9d3dc;line-height:1.55}
label{display:block;font-size:13px;font-weight:700;margin:18px 0 7px}
input,select{
  width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.18);
  background:#0d161e;color:white;outline:none;font:inherit
}
input:focus,select:focus{border-color:#52c7ff;box-shadow:0 0 0 3px rgba(82,199,255,.12)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{margin:14px 0 0}
.location-hint{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(75,193,255,.08);border:1px solid rgba(75,193,255,.18);color:#bfeaff;font-size:12px}
button{
  border:1px solid rgba(255,255,255,.18);background:rgba(9,20,28,.84);color:#fff;
  border-radius:12px;padding:11px 14px;font-weight:800;cursor:pointer
}
button:hover{border-color:rgba(118,215,255,.55);background:rgba(13,32,44,.92)}
#startBtn{
  width:100%;margin-top:20px;padding:15px 18px;border:none;
  background:linear-gradient(90deg,#0f91d8,#20b9f1);font-size:15px;
  box-shadow:0 10px 30px rgba(0,157,225,.25)
}
.small{font-size:12px;margin-bottom:4px}.remember{font-weight:500;color:#c9d3dc;margin:10px 0 0}
.remember input{width:auto;margin-right:7px}
.error{margin-top:15px;padding:12px;border-radius:10px;background:rgba(180,30,45,.25);border:1px solid rgba(255,100,120,.35);color:#ffd4db}
.loading-card{text-align:center}
.spinner{width:48px;height:48px;margin:auto;border:4px solid rgba(255,255,255,.15);border-top-color:#67d5ff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
.left-column{position:absolute;left:16px;top:16px;display:grid;gap:8px;width:min(330px,calc(100vw - 32px));max-height:calc(100vh - 105px);overflow:auto;scrollbar-width:none}
.left-column::-webkit-scrollbar{display:none}
.panel{
  padding:11px 13px;border-radius:14px;background:rgba(5,12,18,.72);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(9px);
  box-shadow:0 12px 30px rgba(0,0,0,.22)
}
.coordinates strong,.objective strong{display:block;font-size:17px;margin:5px 0 4px}
.coordinates span,.objective span{display:block;color:#d7e0e8;font-size:12px;margin-top:3px}
#cityHud{color:#83ddff;font-weight:700}
.compass-panel{padding-bottom:10px}
.compass-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.compass{
  position:relative;flex:0 0 82px;width:82px;height:82px;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(24,42,54,.96),rgba(5,12,18,.96) 68%);
  border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),0 6px 18px rgba(0,0,0,.28)
}
.compass-ring{position:absolute;inset:11px;border-radius:50%;border:1px dashed rgba(255,255,255,.2)}
.cardinal{position:absolute;font-size:10px;font-weight:1000;color:#eef8ff;text-shadow:0 1px 4px #000;z-index:4}
.cardinal.north{top:3px;left:50%;transform:translateX(-50%);color:#70dcff}
.cardinal.east{right:5px;top:50%;transform:translateY(-50%)}
.cardinal.south{bottom:3px;left:50%;transform:translateX(-50%)}
.cardinal.west{left:5px;top:50%;transform:translateY(-50%)}
.needle{position:absolute;inset:9px;transform-origin:50% 50%;z-index:3;will-change:transform}
.needle i{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:block}
.heading-needle i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:27px solid rgba(240,249,255,.96);filter:drop-shadow(0 1px 2px #000)}
.target-needle{z-index:5}
.target-needle i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:14px solid #ffd84d;filter:drop-shadow(0 0 3px rgba(255,210,0,.9))}
.compass-center{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:#74dcff;border:2px solid #061018;z-index:6}
.compass-data{min-width:0;display:grid;gap:4px}
.compass-data strong{font-size:15px;white-space:nowrap}
.compass-data span{font-size:12px;font-weight:800;color:#ffd84d;white-space:nowrap}
.compass-data small{font-size:10px;color:#aebdca;white-space:nowrap}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.drone-dot{background:#35d8ff}.target-dot{background:#ffd84d}.future-dot{background:#ff8a35}
.ring-marker{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:4px solid #ff8a35;background:rgba(5,12,18,.78);color:#fff;font:900 11px/1 Segoe UI,Arial;box-shadow:0 0 12px rgba(255,130,40,.75)}
.ring-marker.active{width:38px;height:38px;border-color:#ffe34d;background:rgba(255,216,40,.22);box-shadow:0 0 20px rgba(255,224,60,1);font-size:13px}
.ring-marker.done{border-color:#48f28a;background:rgba(30,150,80,.35);box-shadow:0 0 10px rgba(60,240,130,.75)}
.drone-marker{width:26px;height:26px;border-radius:50%;background:#35d8ff;border:3px solid #fff;box-shadow:0 0 14px rgba(53,216,255,1);position:relative}
.drone-marker:after{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid #fff}

.route-view{
  position:fixed;inset:0;z-index:60;background:#071018;pointer-events:auto;
}
#routeMap{position:absolute;inset:0;z-index:1;background:#13212b}
#routeMap .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.82)}
#routeMap .leaflet-tile{filter:saturate(.9) contrast(1.03)}
.route-map-toolbar{
  position:absolute;z-index:500;left:18px;right:18px;top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 15px;border-radius:15px;background:rgba(4,10,15,.86);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.3)
}
.route-map-toolbar strong{display:block;font-size:20px;margin-top:3px}
.route-map-toolbar span{display:block;color:#ffd84d;font-size:12px;font-weight:800;margin-top:4px}
.route-map-actions{display:flex;gap:8px}
.route-map-legend{
  position:absolute;z-index:500;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  padding:10px 14px;border-radius:13px;background:rgba(4,10,15,.84);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(9px);font-size:11px;color:#d8e3ea;white-space:nowrap
}
.route-map-legend span{display:flex;align-items:center;gap:5px}

.top-actions{position:absolute;right:18px;top:18px;display:flex;gap:8px;pointer-events:auto}
.top-actions button{backdrop-filter:blur(8px)}
.quality-status{position:absolute;right:18px;top:68px;padding:7px 10px;border-radius:9px;background:rgba(4,10,15,.62);border:1px solid rgba(255,255,255,.12);font-size:10px;font-weight:900;letter-spacing:.12em;color:#9ee7ff}
.controls{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:9px;flex-wrap:wrap;
  justify-content:center;max-width:min(1050px,calc(100vw - 30px));padding:9px 12px;border-radius:14px;
  background:rgba(4,10,15,.66);border:1px solid rgba(255,255,255,.12);font-size:11px;color:#dce7ef
}
kbd{display:inline-block;margin:0 2px;padding:3px 6px;border-radius:5px;background:#172530;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);font-weight:900}
.crosshair{position:absolute;left:50%;top:63%;width:22px;height:22px;transform:translate(-50%,-50%);opacity:.9;transition:top .18s ease}
.crosshair i,.crosshair b{position:absolute;background:#fff;box-shadow:0 0 5px #000}
.crosshair i{width:18px;height:1px;left:2px;top:10px}.crosshair b{height:18px;width:1px;left:10px;top:2px}
.center-message{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:12px 18px;border-radius:13px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.18);font-size:18px;font-weight:900;text-shadow:0 2px 8px #000;text-align:center;max-width:min(620px,80vw)}
.mini-route-panel{position:absolute;right:18px;bottom:78px;width:250px;padding:10px 10px 8px;pointer-events:none}
.mini-route-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mini-route-head strong{font-size:12px;letter-spacing:.12em;color:#d6e9f3}
#miniRouteCanvas{display:block;width:100%;height:190px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(5,17,25,.98),rgba(9,28,40,.98))}
.mini-route-note{margin-top:6px;font-size:10px;color:#bac9d3;text-align:center}
[hidden]{display:none!important}

@media(max-width:900px){
  .left-column{width:300px}.quality-status{display:none}
  .mini-route-panel{right:12px;bottom:92px;width:220px}
  .route-map-toolbar{align-items:flex-start}
  .route-map-actions{flex-direction:column}
}
@media(max-width:720px){
  h1{font-size:31px}.row{grid-template-columns:1fr}.top-actions{top:auto;bottom:92px;right:10px;flex-direction:column}
  .mini-route-panel{display:none}
  .controls{font-size:10px}.left-column{width:270px;max-height:calc(100vh - 115px)}
  .route-map-toolbar{left:10px;right:10px;top:10px;flex-direction:column}
  .route-map-actions{width:100%;flex-direction:row}.route-map-actions button{flex:1}
  .route-map-legend{bottom:10px;max-width:calc(100vw - 20px);justify-content:center;white-space:normal}
}

/* V13: selector automático/manual y barra de carga */
.loading-progress{margin-top:18px;display:grid;gap:8px}
.loading-progress-track{height:14px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(255,255,255,.16)}
#loadingProgressFill{height:100%;width:0%;background:linear-gradient(90deg,#0f91d8,#20b9f1,#89ecff);transition:width .22s ease;box-shadow:0 0 18px rgba(45,195,255,.45)}
#loadingProgressText{font-size:13px;color:#bfeaff}
.route-editor-wrap{margin-top:14px;padding:13px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12)}
.route-editor-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:4px}
.route-editor-head strong{font-size:14px}
.route-editor-head span{font-size:11px;color:#b8cad7}
.placement-panel{margin-top:10px}
.manual-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0}
.manual-toolbar>div{display:grid;gap:3px}
.manual-toolbar strong{font-size:13px}
.manual-toolbar span{font-size:11px;color:#b8cad7}
#addRingBtn{padding:9px 12px}
.manual-ring-head,.manual-ring-row{display:grid;grid-template-columns:48px 1fr 1fr 1fr 42px;gap:7px;align-items:center}
.manual-ring-head{padding:0 3px 6px;color:#76d7ff;font-size:10px;font-weight:900}
.manual-ring-row{margin-bottom:7px}
.manual-ring-row>span{text-align:center;font-weight:900;font-size:12px}
.manual-ring-row input{padding:9px 8px;border-radius:9px;font-size:12px}
.manual-ring-row button{padding:8px 0;border-radius:9px}
@media(max-width:720px){
  .manual-ring-head,.manual-ring-row{grid-template-columns:38px 1fr 1fr 1fr 36px;gap:5px}
  .manual-ring-row input{padding:8px 6px;font-size:11px}
}