*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{background:#0a0e14;color:#e4e7eb;overflow:hidden;height:100vh}
.app{display:grid;grid-template-columns:300px 1fr 340px;grid-template-rows:50px 1fr;height:100vh;transition:grid-template-columns .25s cubic-bezier(0.4, 0, 0.2, 1)}
.app.catalog-collapsed{grid-template-columns:0px 1fr 340px}
.app.catalog-collapsed .sidebar{width:0 !important;min-width:0 !important;max-width:0 !important;padding:0 !important;margin:0 !important;border:none !important;overflow:hidden !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
.sidebar{min-width:0;transition:opacity .2s ease, visibility .2s ease}

/* Botón colapsar catálogo en header del sidebar */
.btn-collapse-sidebar{background:#151d27;border:1px solid #283548;color:#94a3b8;width:24px;height:24px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .15s;flex-shrink:0}
.btn-collapse-sidebar:hover{background:#232f42;color:#f3f4f6;border-color:#38bdf8}

/* Pestaña flotante para reabrir catálogo cuando está colapsado */
.sidebar-expand-tab{position:absolute;top:60px;left:0;z-index:30;background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid #38bdf8;border-left:none;border-radius:0 8px 8px 0;padding:6px 11px;color:#38bdf8;font-size:11px;font-weight:700;cursor:pointer;display:none;align-items:center;gap:6px;box-shadow:2px 4px 14px rgba(0,0,0,0.6),0 0 10px rgba(56,189,248,0.3);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);user-select:none}
.sidebar-expand-tab:hover{background:linear-gradient(135deg,#0284c7,#0369a1);color:#fff;padding-left:14px;box-shadow:2px 6px 20px rgba(56,189,248,0.6)}
.app.catalog-collapsed .sidebar-expand-tab{display:inline-flex !important}

/* HEADER COMPACTO Y RESPONSIVO */
.header{grid-column:1/4;background:linear-gradient(90deg,#0b0f15,#131b26);border-bottom:1px solid #1f2937;display:flex;align-items:center;padding:0 10px;gap:6px;z-index:20;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}
.header::-webkit-scrollbar{display:none;width:0;height:0}
.logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;letter-spacing:-0.2px;flex-shrink:0}
.logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 8px rgba(245,158,11,0.3);flex-shrink:0}
.logo-badge{background:#1f2937;color:#f59e0b;font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:4px;margin-left:4px;border:1px solid #374151;display:inline-flex;align-items:center;gap:3.5px;cursor:pointer;outline:none;user-select:none;transition:all .2s ease}
.logo-badge:hover{background:#374151;border-color:#38bdf8;color:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,0.25);transform:translateY(-1px)}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
.dot-updating{animation:pulseDot 1.2s infinite ease-in-out !important}
@keyframes spinIcon{100%{transform:rotate(360deg)}}
.spin-icon{display:inline-block;animation:spinIcon 1s linear infinite}

.header-presets{display:flex;align-items:center;gap:3px;background:#111827;padding:2px 5px;border-radius:5px;border:1px solid #1f2937;flex-shrink:0}
.header-presets span{font-size:9.5px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.3px}
.preset-btn{background:#1f2937;border:1px solid #374151;color:#e5e7eb;padding:3px 6px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;transition:all .2s cubic-bezier(0.4, 0, 0.2, 1)}
.preset-btn:hover{background:#374151;color:#f59e0b;border-color:#f59e0b}

/* Botón de confirmación de limpieza en 2 pasos */
.preset-btn.confirming{
  background:#dc2626 !important;
  color:#ffffff !important;
  border-color:#f87171 !important;
  padding:3px 8px !important;
  font-size:10px !important;
  font-weight:700 !important;
  box-shadow:0 0 10px rgba(239,68,68,0.7) !important;
  animation:pulse-clear-confirm 1s infinite alternate;
}
@keyframes pulse-clear-confirm{
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(239, 68, 68, 0.5); }
  100% { transform: scale(1.05); box-shadow: 0 0 12px rgba(239, 68, 68, 0.85); }
}

.header-tools{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.tool-group{display:flex;align-items:center;gap:2px;background:#0f1520;padding:2px 3px;border-radius:5px;border:1px solid #1f2937}
.tool-btn{background:#151d27;border:1px solid #283548;color:#e4e7eb;padding:3px 6px;border-radius:4px;cursor:pointer;font-size:10px;display:flex;align-items:center;gap:3px;transition:all .15s;white-space:nowrap}
.tool-btn:hover{background:#232f42;border-color:#4b5563}
.tool-btn.active{background:#f59e0b;color:#0a0e14;border-color:#f59e0b;font-weight:700}
.tool-btn.btn-accent{background:#0284c7;border-color:#0369a1;color:#fff}
.tool-btn.btn-accent:hover{background:#0369a1}
.tool-btn:disabled, .tool-btn.disabled{opacity:0.38;cursor:not-allowed;pointer-events:none;filter:grayscale(0.6)}

/* BOTONES HISTORIAL DESHACER Y REHACER (SOLO ÍCONO) */
#btn-undo, #btn-redo {
  width: 26px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#btn-undo .btn-icon, #btn-redo .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#btn-undo svg, #btn-redo svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1480px) {
  .logo span.logo-title-full { display: none; }
  .header-presets span.preset-label { display: none; }
  .tool-btn .btn-lbl, .preset-btn .btn-lbl { display: none; }
  .tool-btn, .preset-btn { padding: 4px 6px; font-size: 11px; }
  .header { gap: 4px; padding: 0 6px; }
  .tool-group { padding: 2px; gap: 1px; }
}

@media (max-width: 1024px) {
  .header-tools { margin-left: 0; }
  .header { overflow-x: auto; }
}

/* SIDEBAR CATALOG */
.sidebar{background:#0d121a;border-right:1px solid #1f2937;overflow-y:auto;padding:0;display:flex;flex-direction:column;position:relative}
.sidebar-sticky-top{position:sticky;top:0;z-index:25;background:#0d121a;padding:8px 10px 5px 10px;border-bottom:1px solid #1f2937;box-shadow:0 4px 14px rgba(0,0,0,0.4);flex-shrink:0}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.sidebar-head h3{font-size:10px;text-transform:uppercase;color:#94a3b8;letter-spacing:0.8px;font-weight:700;margin:0;line-height:1}
.btn-catalog-explorer, .btn-catalog-action{background:linear-gradient(135deg,#0284c7,#0369a1);border:1px solid #38bdf8;color:#fff;width:24px;height:24px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .15s;flex-shrink:0}
.btn-catalog-explorer svg, .btn-catalog-explorer i, .btn-catalog-action svg, .btn-catalog-action i{width:14px;height:14px}
.btn-catalog-explorer * , .btn-catalog-action * {pointer-events:none}
.btn-catalog-explorer:hover, .btn-catalog-action:hover{background:linear-gradient(135deg,#0369a1,#0284c7);box-shadow:0 0 10px rgba(56,189,248,0.5);transform:translateY(-1px)}
.search-wrap{position:relative;display:flex;align-items:center;margin-bottom:5px}
.search-input{width:100%;background:#151b23;border:1px solid #1f2937;color:#e4e7eb;padding:5px 24px 5px 8px;border-radius:5px;font-size:10.5px;margin-bottom:0}
.search-input:focus{outline:none;border-color:#f59e0b}
.btn-clear-search{position:absolute;right:7px;background:none;border:none;color:#9ca3af;cursor:pointer;font-size:11px;padding:1px 3px;border-radius:3px}
.btn-clear-search:hover{color:#ef4444}
.discipline-chips-bar{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#374151 transparent;padding:1px 0 2px 0}
.discipline-chips-bar::-webkit-scrollbar{height:3px}
.discipline-chips-bar::-webkit-scrollbar-thumb{background:#374151;border-radius:2px}
.discipline-chips-bar::-webkit-scrollbar-track{background:transparent}
.discipline-chip{background:#151d27;border:1px solid #283548;color:#9ca3af;font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:10px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:all .15s;flex-shrink:0}
.discipline-chip:hover{background:#232f42;color:#f3f4f6;border-color:#4b5563}
.discipline-chip.active{background:#0284c7;border-color:#38bdf8;color:#ffffff;font-weight:700;box-shadow:0 0 8px rgba(2,132,199,0.45)}
#catalog{padding:10px 12px;flex:1;overflow-y:visible}
.category{margin-bottom:7px;background:rgba(15,23,34,0.45);border:1px solid rgba(31,41,55,0.7);border-radius:7px;overflow:hidden;transition:border-color .15s ease}
.category:hover{border-color:rgba(56,189,248,0.3)}
.category.collapsed{margin-bottom:4px}
.cat-title{font-size:10px;font-weight:700;color:#f59e0b;padding:6px 8px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:0.4px;cursor:pointer;user-select:none;background:rgba(20,27,37,0.75);transition:background .15s,color .15s;border-bottom:1px solid transparent}
.cat-title:hover{background:#1c2738;color:#fbbf24}
.category:not(.collapsed) .cat-title{border-bottom-color:rgba(31,41,55,0.7)}
.cat-chevron{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;color:#f59e0b;transition:transform .2s cubic-bezier(0.4,0,0.2,1);flex-shrink:0}
.cat-chevron svg, .cat-chevron i{width:12px;height:12px;stroke-width:2.2}
.category.collapsed .cat-chevron{transform:rotate(-90deg)}
.cat-title-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-count-badge{font-size:8.5px;color:#94a3b8;background:#0d131b;border:1px solid #1f2a3a;padding:1px 5px;border-radius:10px;font-weight:700;margin-left:auto;flex-shrink:0}
.cat-items{padding:5px 6px 3px 6px;display:flex;flex-direction:column;gap:1px}
.category.collapsed .cat-items{display:none}
.equip-item{background:#141b24;border:1px solid #1f2a3a;border-radius:6px;padding:7px 9px;margin-bottom:5px;cursor:grab;display:flex;align-items:center;gap:8px;transition:all .15s;user-select:none;position:relative}
.equip-item:hover{background:#1f2a38;border-color:#f59e0b;transform:translateX(3px)}
.equip-item:active{cursor:grabbing}
.equip-icon{width:30px;height:30px;background:#090d13;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;border:1px solid #1c2635}
.equip-info{flex:1;min-width:0}
.equip-name{font-size:10.5px;font-weight:600;color:#f3f4f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-desc{font-size:9px;color:#9ca3af;margin-top:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-quick-view{opacity:0;transition:opacity .15s,color .15s,transform .15s;background:none;border:none;color:#64748b;padding:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;flex-shrink:0}
.equip-quick-view svg, .equip-quick-view i{width:13px;height:13px;stroke-width:1.8}
.equip-item:hover .equip-quick-view{opacity:0.65}
.equip-quick-view:hover{opacity:1;color:#38bdf8;transform:scale(1.2)}

/* CANVAS WRAPPER */
.canvas-wrap{min-width:0;width:100%;height:100%;position:relative;background:#080c12;overflow:hidden}
#canvas3d{width:100% !important;height:100% !important;display:block;cursor:grab}
#canvas3d.panning{cursor:grabbing}
#canvas3d.dragging-equip{cursor:grabbing}

/* CANVAS OVERLAYS */
.canvas-top-bar{position:absolute;top:10px;left:10px;right:60px;display:flex;align-items:flex-start;gap:8px;pointer-events:none;z-index:10;flex-wrap:wrap}

.canvas-info{background:rgba(13,18,26,0.92);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:8px;padding:6px 10px;font-size:10px;font-family:'JetBrains Mono',monospace;pointer-events:auto;box-shadow:0 4px 15px rgba(0,0,0,0.5);flex-shrink:0}
.canvas-info-head{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;font-weight:600;color:#e2e8f0}
.canvas-info-head .info-sep{color:#475569;margin:0 2px}
.canvas-info-head #cursor-pos{color:#38bdf8;font-weight:700}
.canvas-info-head #equip-count{color:#f59e0b;font-weight:700}
.canvas-info-details{margin-top:5px;padding-top:4px;border-top:1px solid #1f2937}
.canvas-info div{margin:2px 0;color:#9ca3af}
.canvas-info span{color:#f59e0b;font-weight:600}

/* CÁPSULA SMART AMBIENTAL (HUD TÁCTICO MINIMIZABLE) */
.env-smart-capsule{position:relative;background:none;border:none;box-shadow:none;padding:0;display:flex;flex-direction:column;pointer-events:auto;max-width:calc(100% - 240px)}
.env-capsule-pill{background:rgba(13,18,26,0.92);backdrop-filter:blur(12px);border:1px solid #1f2937;border-radius:20px;padding:4px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px rgba(0,0,0,0.5);cursor:pointer;user-select:none;transition:all .2s ease}
.env-capsule-pill:hover{border-color:#38bdf8;box-shadow:0 0 12px rgba(56,189,248,0.3);background:rgba(18,24,35,0.96)}
.capsule-chip{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#cbd5e1;white-space:nowrap}
.capsule-chip-icon{font-size:11px}
.capsule-divider{width:1px;height:12px;background:#283548}
.capsule-chevron-btn{background:none;border:none;color:#94a3b8;font-size:11px;cursor:pointer;padding:0 2px;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}
.env-smart-capsule.expanded .capsule-chevron-btn{transform:rotate(180deg)}
.env-capsule-expanded{margin-top:6px;background:rgba(13,18,26,0.95);backdrop-filter:blur(14px);border:1px solid #283548;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 25px rgba(0,0,0,0.65),0 0 0 1px rgba(56,189,248,0.15);animation:capsule-drop .2s ease-out}
@keyframes capsule-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.hud-wind-section{display:flex;align-items:center;gap:8px}
.hud-divider{width:1px;height:38px;background:#1f2937;flex-shrink:0}
.hud-solar-section{display:flex;flex-direction:column;gap:2px;min-width:215px}

.wind-indicator{width:34px;height:34px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0f172a;border:1.5px solid #334155;flex-shrink:0;box-shadow:inset 0 0 4px rgba(0,0,0,0.6)}
.wind-needle{width:2.5px;height:24px;background:linear-gradient(to top,#ef4444 50%,#3b82f6 50%);transform:rotate(45deg);position:absolute;transition:transform .25s ease;border-radius:1px}
.wind-needle::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:#facc15;border-radius:50%;transform:translate(-50%,-50%)}
.wind-data{display:flex;flex-direction:column;gap:2px}
.wind-data select{background:#141d27;color:#e4e7eb;border:1px solid #283548;padding:3px 5px;border-radius:4px;font-size:10.5px;font-weight:600}

.solar-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.solar-play-btn{background:#151d27;border:1px solid #283548;color:#e4e7eb;padding:2px 7px;border-radius:4px;cursor:pointer;font-size:9.5px;font-weight:600;display:flex;align-items:center;gap:3px;transition:all .15s}
.solar-play-btn:hover{background:#232f42;border-color:#f59e0b;color:#f59e0b}
.solar-play-btn.playing{background:#f59e0b;color:#0a0e14;border-color:#f59e0b;font-weight:700}
.solar-slider-row{display:flex;align-items:center;gap:6px;margin:1px 0}
.solar-slider{flex:1;accent-color:#f59e0b;cursor:pointer;height:4px}
.solar-presets{display:flex;gap:3px}
.time-btn{flex:1;background:#151d27;border:1px solid #283548;color:#9ca3af;padding:2px 3px;border-radius:4px;cursor:pointer;font-size:9px;font-weight:600;text-align:center;transition:all .15s;white-space:nowrap}
.time-btn:hover{background:#232f42;color:#f3f4f6}
.time-btn.active{background:#f59e0b;color:#0a0e14;border-color:#f59e0b;font-weight:700}

.hud-weather-section{display:flex;flex-direction:column;gap:2px;min-width:150px}
.weather-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.weather-action-btn{background:#151d27;border:1px solid #38bdf8;color:#38bdf8;padding:1px 6px;border-radius:4px;font-size:9.5px;cursor:pointer;font-weight:700;transition:all .15s}
.weather-action-btn:hover{background:#38bdf8;color:#0a0e14}
.weather-select{background:#141d27;color:#e4e7eb;border:1px solid #283548;padding:2px 5px;border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;outline:none}

.canvas-legend{position:absolute;bottom:14px;left:14px;background:rgba(13,18,26,0.92);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:8px;padding:6px 10px;font-size:10.5px;pointer-events:auto;box-shadow:0 4px 15px rgba(0,0,0,0.5);transition:all .2s ease;user-select:none;z-index:8}
.legend-header{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-weight:700;font-size:10px;color:#94a3b8}
.legend-header:hover{color:#f3f4f6}
.legend-chevron-btn{background:none;border:none;color:#94a3b8;font-size:11px;cursor:pointer;padding:0 2px;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}
.canvas-legend.collapsed .legend-chevron-btn{transform:rotate(180deg)}
.canvas-legend.collapsed .legend-body{display:none}
.legend-body{margin-top:5px;padding-top:4px;border-top:1px solid #1f2937}
.legend-item{display:flex;align-items:center;gap:8px;margin:3px 0;color:#9ca3af}
.legend-dot{width:10px;height:10px;border-radius:3px}

/* BRÚJULA HUD 3D TÁCTICA (COLUMNA DERECHA SUPERIOR) */
.hud-compass {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: rgba(13, 18, 26, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 4px 2px 3px 2px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}
.hud-compass:hover {
  border-color: #38bdf8;
  background: #151d27;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}
.hud-compass:active {
  transform: scale(0.95);
}
.compass-dial {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s linear;
  pointer-events: none;
}
.compass-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.compass-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: #38bdf8;
  text-align: center;
  margin-top: 1px;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.2px;
}

.zoom-controls{position:absolute;top:62px;right:10px;display:flex;flex-direction:column;gap:3px;background:rgba(13,18,26,0.92);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:7px;padding:4px;z-index:10;box-shadow:0 4px 15px rgba(0,0,0,0.5);width:36px;align-items:center}
.zoom-btn{width:26px;height:26px;background:#151d27;border:1px solid #283548;color:#e4e7eb;border-radius:5px;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s}
.zoom-btn:hover{background:#f59e0b;color:#0a0e14;border-color:#f59e0b}
.zoom-btn:active{transform:scale(.92)}
.zoom-btn.zoom-help-btn{font-size:11px;color:#9ca3af}
.zoom-display{font-family:'JetBrains Mono',monospace;font-size:9px;color:#f59e0b;text-align:center;padding:2px 0;font-weight:600;width:100%;border-top:1px solid #1f2937;border-bottom:1px solid #1f2937;margin:1px 0}

/* BOTÓN COPIAR / GUARDAR DEBAJO DE AJUSTAR VISTA */
#btn-copy-save {
  color: #38bdf8;
  border-color: #0369a1;
  background: #0f172a;
}
#btn-copy-save:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}
#btn-copy-save:active {
  transform: scale(.92);
}

/* BOTÓN PANTALLA COMPLETA DEL CANVAS (DEBAJO DE LOS BOTONES DE ZOOM) */
#btn-canvas-fullscreen {
  color: #10b981;
  border-color: #047857;
  background: rgba(6, 78, 59, 0.25);
}
#btn-canvas-fullscreen:hover {
  background: #059669;
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
#btn-canvas-fullscreen:active {
  transform: scale(.92);
}
#btn-canvas-fullscreen.active {
  background: #10b981;
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

/* REGLAS DE PANTALLA COMPLETA DEL CANVAS */
.canvas-wrap:fullscreen,
.canvas-wrap:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: #080c12;
}
.canvas-wrap.canvas-fullscreen-fallback {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #080c12;
}

/* MENÚ FLOTANTE DE OPCIONES COPIAR / GUARDAR */
.copy-save-popover {
  position: absolute;
  top: 170px;
  right: 50px;
  background: rgba(13, 18, 26, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid #283548;
  border-radius: 8px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(56, 189, 248, 0.18);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 230px;
  animation: fadeInPop 0.15s ease-out;
}
.copy-save-header {
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px 3px 8px;
  display: flex;
  align-items: center;
}
.copy-save-res-section {
  padding: 4px 6px 6px 6px;
}
.copy-save-res-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.copy-save-res-chips {
  display: flex;
  gap: 4px;
}
.res-chip {
  flex: 1;
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.res-chip:hover {
  background: #334155;
  color: #f8fafc;
  border-color: #475569;
}
.res-chip.active {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.35);
}
.copy-save-item.highlight-macro {
  color: #c084fc;
  font-weight: 700;
}
.copy-save-item.highlight-macro:hover {
  background: rgba(168, 85, 247, 0.18);
  color: #e9d5ff;
}
.copy-save-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #e4e7eb;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
  width: 100%;
}
.copy-save-item:hover {
  background: #1e293b;
  color: #38bdf8;
}
.copy-save-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.copy-save-divider {
  height: 1px;
  background: #1f2937;
  margin: 3px 0;
}

.hud-scale-bar-wrap{position:absolute;bottom:14px;right:14px;background:rgba(13,18,26,0.92);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:8px;padding:6px 12px;font-size:10.5px;font-family:'JetBrains Mono',monospace;color:#38bdf8;pointer-events:none;box-shadow:0 4px 15px rgba(0,0,0,0.5);display:flex;align-items:center;gap:8px;z-index:10}
.hud-scale-bar{display:flex;align-items:center;height:8px;position:relative}
.hud-scale-line{height:2px;background:#38bdf8;width:80px;border-radius:1px}
.hud-scale-tick{width:2px;height:7px;background:#38bdf8}
.hud-scale-label{font-weight:700;color:#f8fafc;letter-spacing:0.5px;min-width:38px;text-align:right}

.status-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(13,18,26,0.92);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:8px;padding:7px 14px;font-size:11px;font-family:'JetBrains Mono',monospace;color:#9ca3af;pointer-events:none;box-shadow:0 4px 15px rgba(0,0,0,0.5);white-space:nowrap;z-index:9}

/* PEGMAN STREET VIEW 3D DOCK & DRAG (ESTILO GOOGLE MAPS) */
.pegman-dock-wrap{position:absolute;top:248px;right:10px;display:flex;flex-direction:column;align-items:center;z-index:12;user-select:none;width:36px}
.pegman-dock{width:36px;height:44px;background:rgba(13,18,26,0.94);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:7px;box-shadow:0 4px 16px rgba(0,0,0,0.55),0 0 0 1px rgba(245,158,11,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;position:relative;transition:all .2s cubic-bezier(0.34,1.56,0.64,1)}
.pegman-dock:hover{background:#1e293b;border-color:#f59e0b;box-shadow:0 6px 20px rgba(245,158,11,0.35);transform:translateY(-2px)}
.pegman-dock:active{cursor:grabbing}
.pegman-avatar{width:26px;height:38px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;pointer-events:none}
.pegman-dock:hover .pegman-avatar{transform:scale(1.12) translateY(-1px)}
.pegman-svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6))}
.pegman-tooltip{position:absolute;right:44px;top:50%;transform:translateY(-50%) translateX(6px);background:rgba(15,23,42,0.96);border:1px solid #38bdf8;border-radius:6px;padding:6px 10px;color:#f8fafc;font-size:10.5px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:all .2s ease;box-shadow:0 4px 15px rgba(0,0,0,0.6);display:flex;flex-direction:column;gap:2px}
.pegman-dock-wrap:hover .pegman-tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.pegman-tt-title{font-weight:700;color:#38bdf8;display:flex;align-items:center;gap:4px}
.pegman-tt-desc{font-size:9.5px;color:#94a3b8}

#pegman-drag-ghost{position:fixed;pointer-events:none;z-index:99999;width:44px;height:58px;transform:translate(-50%,-85%) rotate(-8deg);filter:drop-shadow(0 12px 16px rgba(0,0,0,0.7));display:none;transition:transform 0.04s ease-out}
#pegman-drag-ghost.dragging{display:block}
#pegman-drag-ghost .pegman-svg{animation:pegman-dangle 0.55s ease-in-out infinite alternate}
@keyframes pegman-dangle{0%{transform:rotate(-6deg)}100%{transform:rotate(10deg)}}

#pegman-drop-badge{position:fixed;pointer-events:none;z-index:99999;background:rgba(15,23,42,0.94);border:1.5px solid #10b981;color:#ecfdf5;padding:5px 10px;border-radius:16px;font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace;box-shadow:0 4px 20px rgba(0,0,0,0.6);white-space:nowrap;display:none;transform:translate(22px,-24px)}

/* PALETA FLOTANTE DE HERRAMIENTAS Y CAPAS 3D (DEBAJO DE PEGMAN) */
.canvas-floating-toolbar{position:absolute;top:298px;right:10px;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(13,18,26,0.94);backdrop-filter:blur(10px);border:1px solid #1f2937;border-radius:7px;padding:4px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.55);width:36px;user-select:none}
.canvas-floating-toolbar .tool-btn{width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:5px;background:#151d27;border:1px solid #283548;color:#e4e7eb;transition:all .15s ease;cursor:pointer;position:relative}
.canvas-floating-toolbar .tool-btn:hover{background:#1e293b;border-color:#38bdf8;transform:translateY(-1px)}
.canvas-floating-toolbar .tool-btn:active{transform:scale(0.92)}
.canvas-floating-toolbar .tool-btn.active{background:#0284c7;border-color:#38bdf8;color:#ffffff;box-shadow:0 0 8px rgba(56,189,248,0.45)}
.canvas-floating-toolbar #btn-toggle-labels.active,
.canvas-floating-toolbar #btn-safety-rings.active,
.canvas-floating-toolbar #btn-grid.active{background:rgba(16,185,129,0.25);border-color:#10b981;color:#10b981;box-shadow:0 0 8px rgba(16,185,129,0.35)}
.floating-toolbar-divider{width:20px;height:1px;background:#283548;margin:2px 0}

/* HUD FLOTANTE DE ACOTADO PROFESIONAL Y MEDICIÓN CAD */
.measure-hud {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 18, 26, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 5px 12px;
  z-index: 15;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(56, 189, 248, 0.15);
  user-select: none;
  font-family: 'Inter', sans-serif;
  color: #e2e8f0;
  transition: all 0.2s ease;
}
.measure-hud-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.measure-hud-divider {
  width: 1px;
  height: 20px;
  background: #283548;
}
.measure-hud-modes {
  display: flex;
  align-items: center;
  gap: 4px;
}
.measure-mode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #151d27;
  border: 1px solid #283548;
  border-radius: 5px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.measure-mode-btn:hover {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #38bdf8;
}
.measure-mode-btn.active {
  background: rgba(2, 132, 199, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}
.measure-hud-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
}
.measure-toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #151d27;
  border: 1px solid #283548;
  border-radius: 5px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.measure-toggle-btn:hover {
  background: #1e293b;
  color: #f1f5f9;
}
.measure-toggle-btn.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}
.measure-hud-colors {
  display: flex;
  align-items: center;
  gap: 5px;
}
.measure-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.measure-color-swatch:hover {
  transform: scale(1.25);
}
.measure-color-swatch.active {
  transform: scale(1.25);
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.measure-hud-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.measure-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #151d27;
  border: 1px solid #283548;
  border-radius: 5px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.measure-action-btn:hover {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #38bdf8;
}
.measure-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171;
}

/* PROPERTIES PANEL (ULTRA-COMPACTO SIN SCROLLBAR) */
.properties{background:#0d121a;border-left:1px solid #1f2937;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.prop-section{background:#121822;border:1px solid #1c2635;border-radius:6px;padding:6px 8px;margin-bottom:0}
.prop-section h4{font-size:9.5px;text-transform:uppercase;color:#f59e0b;letter-spacing:0.8px;margin-bottom:4px;font-weight:700;display:flex;align-items:center;gap:4px;line-height:1}
.prop-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:4px}
.prop-row:last-child{margin-bottom:0}
.prop-field{display:flex;flex-direction:column;gap:2px}
.prop-field label{font-size:8.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;font-weight:600;line-height:1}
.prop-field input{background:#090d13;border:1px solid #1f2a3a;color:#e4e7eb;padding:4px 6px;border-radius:4px;font-size:10.5px;font-family:'JetBrains Mono',monospace;width:100%;height:24px}
.prop-field input:focus{outline:none;border-color:#f59e0b}
.prop-field.full{grid-column:1/3}

.safety-alert{background:rgba(239,68,68,0.15);border:1px solid #ef4444;color:#fca5a5;padding:4px 6px;border-radius:4px;font-size:9px;margin-top:4px;line-height:1.25;display:flex;gap:4px}
.safety-ok{background:rgba(16,185,129,0.15);border:1px solid #10b981;color:#6ee7b7;padding:4px 6px;border-radius:4px;font-size:9px;margin-top:4px;line-height:1.25;display:flex;gap:4px}

.empty-state{text-align:center;padding:30px 14px;color:#6b7280}
.empty-state .icon{font-size:32px;margin-bottom:6px;opacity:.3}
.empty-state p{font-size:10px;line-height:1.4}
.btn{background:#f59e0b;color:#0a0e14;border:none;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:700;width:100%;transition:all .15s;line-height:1.2}
.btn:hover{background:#fbbf24}
.btn-danger{background:#dc2626;color:white}
.btn-danger:hover{background:#ef4444}
.btn-secondary{background:#151d27;color:#e4e7eb;border:1px solid #283548}
.btn-secondary:hover{background:#232f42;border-color:#4b5563}
.btn-row{display:flex;gap:5px;margin-top:4px}
.btn-row .btn{flex:1}

/* UTILITIES */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#090d13}
::-webkit-scrollbar-thumb{background:#232f42;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#3b4d66}
.drag-ghost{position:fixed;pointer-events:none;z-index:1000;background:rgba(245,158,11,.25);border:2px solid #f59e0b;border-radius:6px;padding:6px 12px;font-size:11.5px;font-weight:700;color:#f59e0b;backdrop-filter:blur(8px)}
.toast{position:fixed;top:70px;right:20px;background:#151e2b;border:1px solid #f59e0b;border-radius:6px;padding:9px 15px;font-size:12px;color:#f3f4f6;z-index:2000;box-shadow:0 6px 20px rgba(0,0,0,0.6);animation:slideIn .25s ease}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* MODAL DE EXPORTACION / IMPRESION */
.modal-backdrop, .modal-overlay{position:fixed !important;inset:0 !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;background:rgba(4,7,12,0.85) !important;backdrop-filter:blur(6px) !important;-webkit-backdrop-filter:blur(6px) !important;display:none;align-items:center !important;justify-content:center !important;z-index:99999 !important}
.modal-backdrop.open, .modal-overlay.open{display:flex !important}
.modal-card{background:#0f1520;border:1px solid #283548;border-radius:10px;width:700px;max-width:90vw;max-height:90vh;overflow-y:auto;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,0.8)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;border-bottom:1px solid #1f2937;padding-bottom:10px}
.modal-head h2{font-size:16px;font-weight:700;color:#f59e0b}
.modal-close{background:transparent;border:none;color:#9ca3af;font-size:18px;cursor:pointer}
.modal-close:hover{color:#fff}
.plan-preview{width:100%;height:320px;border:1px solid #1f2937;border-radius:6px;background:#000;margin-bottom:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.plan-preview img{max-width:100%;max-height:100%;object-fit:contain}
.plan-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.plan-field{display:flex;flex-direction:column;gap:3px}
.plan-field label{font-size:10px;color:#9ca3af;text-transform:uppercase}
.plan-field input{background:#151d27;border:1px solid #283548;color:#fff;padding:6px 10px;border-radius:5px;font-size:11px}

/* BOTON SELECTOR DE IDIOMA Y UNIDADES */
.lang-btn{background:#1e293b;border:1px solid #3b82f6;color:#93c5fd;padding:2px 7px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;transition:all .15s}
.lang-btn:hover{background:#2563eb;color:#fff;border-color:#60a5fa}
.unit-btn{background:#1e293b;border:1px solid #10b981;color:#6ee7b7;padding:2px 7px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;transition:all .15s}
.unit-btn:hover{background:#059669;color:#fff;border-color:#34d399}

/* BANNER DE EVACUACION Y ALARMA HSE */
#evacuation-banner{animation:alarmPulse .9s infinite alternate ease-in-out;user-select:none}
@keyframes alarmPulse{0%{transform:translateX(-50%) scale(1);box-shadow:0 6px 20px rgba(220,38,38,0.5)}100%{transform:translateX(-50%) scale(1.02);box-shadow:0 8px 30px rgba(239,68,68,0.9)}}

/* =========================================================================
   MODO RECORRIDO VIRTUAL 3D (1ª / 3ª PERSONA)
   ========================================================================= */
#walk-mode-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#walk-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
  transition: opacity 0.2s;
}

#walk-crosshair::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  background: #38bdf8;
  border-radius: 50%;
}

#walk-pointer-hint {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #38bdf8;
  color: #f0f9ff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  backdrop-filter: blur(6px);
  animation: pulseHint 2s infinite ease-in-out;
  transition: opacity 0.25s ease;
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.95; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.75; transform: translateX(-50%) scale(0.98); }
}

#walk-climb-prompt {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(180, 83, 9, 0.95);
  border: 1.5px solid #f59e0b;
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
  pointer-events: none;
  backdrop-filter: blur(8px);
  animation: pulsePrompt 1.4s infinite alternate ease-in-out;
  z-index: 110;
  transition: opacity 0.2s ease;
}

@keyframes pulsePrompt {
  0% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); }
  100% { transform: translateX(-50%) scale(1.03); box-shadow: 0 10px 28px rgba(245, 158, 11, 0.7); }
}

.walk-alt-badge {
  background: #78350f;
  color: #fef3c7;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #f59e0b;
  white-space: nowrap;
}

#walk-controls-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #0284c7;
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
  pointer-events: auto;
  backdrop-filter: blur(10px);
  max-width: 95vw;
}

.walk-hud-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.walk-badge {
  background: #0369a1;
  color: #e0f2fe;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid #38bdf8;
  white-space: nowrap;
}

.walk-speed-badge {
  background: #14532d;
  color: #bbf7d0;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #22c55e;
  white-space: nowrap;
}

.walk-hud-keys {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid #1e293b;
  border-right: 1px solid #1e293b;
  padding: 0 12px;
}

.walk-key-chip {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  transition: all 0.15s ease;
}

.walk-key-chip:hover {
  background: #334155;
  border-color: #38bdf8;
  color: #fff;
}

.walk-key-chip kbd {
  background: #0f172a;
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 800;
  color: #38bdf8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.walk-hud-right {
  display: flex;
  align-items: center;
}

#btn-exit-walk {
  background: #dc2626;
  border: 1px solid #ef4444;
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#btn-exit-walk:hover {
  background: #b91c1c;
  border-color: #f87171;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

/* ==========================================
   PALETA Y SELECTOR DE COLOR DE EQUIPOS
   ========================================== */
.color-palette-container {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
}

.color-swatch-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #1e293b;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.color-swatch-btn:hover {
  transform: scale(1.18);
  border-color: #f59e0b;
}

.color-swatch-btn.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #f59e0b, 0 3px 6px rgba(0, 0, 0, 0.6);
  transform: scale(1.12);
}

.color-picker-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px dashed #64748b;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.color-picker-wrapper:hover {
  transform: scale(1.18);
  border-color: #ffffff;
}

.color-picker-wrapper input[type="color"] {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}

.btn-reset-color {
  width: 100%;
  margin-top: 7px;
  font-size: 10px;
  padding: 5px 6px;
  background: #111827;
  border: 1px solid #374151;
  color: #9ca3af;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.btn-reset-color:hover {
  background: #1f2937;
  color: #f3f4f6;
  border-color: #4b5563;
}

.btn-apply-all-color {
  width: 100%;
  margin-top: 7px;
  font-size: 10px;
  padding: 6px 8px;
  background: #0369a1;
  border: 1px solid #0284c7;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.btn-apply-all-color:hover {
  background: #0284c7;
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(3, 105, 161, 0.45);
}

.color-exclusion-note {
  font-size: 9px;
  color: #94a3b8;
  margin-top: 5px;
  line-height: 1.35;
  padding: 5px 7px;
  background: rgba(15, 23, 42, 0.65);
  border-radius: 4px;
  border-left: 2px solid #38bdf8;
}

.fleet-badge-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  vertical-align: middle;
}

/* ==========================================================================
   HUD ORIENTACIÓN Y GIRO DE TERRENO SATELITAL
   ========================================================================== */
.hud-map-rotation {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: rgba(13, 19, 28, 0.94);
  border: 1px solid #283548;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  padding: 7px 12px;
  width: auto;
  min-width: 480px;
  max-width: 90vw;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  user-select: none;
  transition: all 0.2s ease;
}

.hud-map-rotation.minimized {
  min-width: unset;
  padding: 5px 10px;
}

.hud-rot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hud-rot-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hud-rot-icon {
  font-size: 13px;
}

.hud-rot-title {
  font-size: 11px;
  font-weight: 700;
  color: #f3f4f6;
  letter-spacing: 0.2px;
}

.hud-rot-badge {
  background: #1e293b;
  border: 1px solid #334155;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.hud-rot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* BRÚJULA COMPACTA DE RUMBO NORTE */
.hud-rot-compass-box {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hud-rot-compass-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #3b82f6;
  background: radial-gradient(circle, #1e293b 40%, #0f172a 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

.hud-rot-compass-n {
  position: absolute;
  top: 1px;
  font-size: 8px;
  font-weight: 800;
  color: #ef4444;
  line-height: 1;
  pointer-events: none;
}

.hud-rot-needle {
  width: 2px;
  height: 16px;
  position: absolute;
  top: 5px;
  background: linear-gradient(to bottom, #ef4444 50%, #94a3b8 50%);
  border-radius: 1px;
  transform-origin: center center;
  transition: transform 0.05s linear;
  box-shadow: 0 0 3px rgba(239, 68, 68, 0.8);
}

.hud-rot-toggle-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #9ca3af;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.hud-rot-toggle-btn:hover {
  background: #334155;
  color: #fff;
}

.hud-rot-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hud-map-rotation.minimized .hud-rot-body {
  display: none;
}

/* FILA DEL SLIDER Y BOTONES DE PASO */
.hud-rot-slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sat-rot-slider {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #1e293b;
  outline: none;
  cursor: pointer;
  accent-color: #38bdf8;
}

.rot-step-btn {
  background: #151d27;
  border: 1px solid #283548;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.rot-step-btn:hover {
  background: #253347;
  border-color: #38bdf8;
  color: #fff;
}

/* FILA DE HERRAMIENTAS, PRESETS Y BOTÓN DE ALINEAR AL NORTE */
.hud-rot-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.hud-rot-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #9ca3af;
}

.hud-rot-input-wrap input {
  width: 58px;
  background: #0d131c;
  border: 1px solid #334155;
  color: #38bdf8;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  outline: none;
}

.hud-rot-input-wrap input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.hud-rot-presets {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rot-preset-btn {
  background: #151d27;
  border: 1px solid #283548;
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.rot-preset-btn:hover {
  background: #1f293d;
  color: #f1f5f9;
  border-color: #475569;
}

/* BOTÓN DESTACADO: ORIENTAR TODO AL NORTE */
.btn-align-all-north {
  background: linear-gradient(135deg, #059669, #047857);
  border: 1px solid #10b981;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-align-all-north:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
}

.btn-align-all-north:active {
  transform: translateY(0);
}

/* SELECTOR DE CALIDAD GRÁFICA */
#btn-graphics-quality {
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16, 185, 129, 0.12);
}
#btn-graphics-quality:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
  background: rgba(16, 185, 129, 0.22);
}
#chip-walk-quality {
  transition: all 0.15s ease;
}
#chip-walk-quality:hover {
  filter: brightness(1.25);
  transform: scale(1.05);
}

/* =========================================================================
   SEMÁFORO HSE DE TORMENTA ELÉCTRICA Y METEOROLOGÍA EN VIVO (API RP 54)
   ========================================================================= */

.hse-weather-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.weather-mode-pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 9.5px;
  padding: 3px 7px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.weather-mode-pill:hover {
  border-color: #38bdf8;
  color: #f8fafc;
}

.weather-mode-pill.active {
  background: rgba(14, 165, 233, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

.weather-mode-pill:not(.active) {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-weight: 600;
}

.hse-sem-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  border: 1px solid transparent;
  flex: 1;
  justify-content: space-between;
}

.hse-sem-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* Estados del Semáforo */
.hse-sem-badge.sem-green {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.hse-sem-badge.sem-green:hover {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.hse-sem-badge.sem-yellow {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}
.hse-sem-badge.sem-yellow:hover {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.hse-sem-badge.sem-red {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fca5a5;
  animation: hse-alarm-border 1.2s infinite alternate;
}
.hse-sem-badge.sem-red:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
}

/* LEDs Pulsantes del Semáforo */
.hse-sem-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.hse-sem-led.led-green {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-green 2.5s infinite;
}

.hse-sem-led.led-yellow {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulse-yellow 1.4s infinite;
}

.hse-sem-led.led-red {
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
  animation: pulse-red-alarm 0.8s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes pulse-yellow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

@keyframes pulse-red-alarm {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.9); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes hse-alarm-border {
  0% { border-color: rgba(239, 68, 68, 0.4); }
  100% { border-color: rgba(239, 68, 68, 1.0); }
}

/* Tarjetas y banners del Modal HSE */
.hse-metric-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 6px;
  padding: 8px 10px;
}

.hse-metric-title {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hse-metric-val {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}

.hse-metric-sub {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 2px;
}

/* SISTEMA ATMOSFÉRICO DUAL REDUNDANTE (NOAA GFS + ECMWF IFS) */
.hse-consensus-box {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.hse-consensus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.hse-consensus-title {
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hse-consensus-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.badge-high {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid #10b981;
}
.badge-mod {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid #f59e0b;
}
.badge-low {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid #ef4444;
}
.hse-model-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 6px;
}
.hse-model-table th {
  background: #1e293b;
  color: #94a3b8;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.4px;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #334155;
}
.hse-model-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
  color: #cbd5e1;
  font-family: 'JetBrains Mono', monospace;
}
.hse-model-table tr:hover {
  background: rgba(30, 41, 59, 0.6);
}
.hse-dual-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #334155;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hse-dual-pill:hover {
  border-color: #38bdf8;
  color: #38bdf8;
}

/* ENCABEZADO COMPACTO MODAL HSE Y ESTIMADOR DE RAYOS */
.hse-modal-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #334155 !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
.hse-modal-head .modal-close {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.hse-modal-head .modal-close:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.hse-lightning-dist-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.hse-weather-modal-card {
  max-height: 92vh !important;
  overflow-y: auto !important;
}

/* =========================================================================
   PANEL LATERAL DERECHO: TELEMETRÍA METEOROLÓGICA Y PROTOCOLO HSE (API RP 54)
   ========================================================================= */

.hse-panel-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn 0.25s ease-out;
}

.hse-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 8px;
}

.hse-panel-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.3px;
}

.hse-panel-subtitle {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.hse-panel-location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.7);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #1e293b;
  font-size: 10.5px;
  color: #cbd5e1;
}

.hse-panel-hero {
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.3s ease;
}

.hse-hero-green {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.hse-hero-yellow {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.hse-hero-red {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  animation: hse-alarm-border 1.2s infinite alternate;
}

.hse-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.hse-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(51, 65, 85, 0.75);
  border-radius: 6px;
  padding: 7px 9px;
}

.hse-card-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.hse-card-num {
  font-size: 13.5px;
  font-weight: 800;
  color: #f8fafc;
  margin: 2px 0;
}

.hse-card-sub {
  font-size: 9px;
  color: #64748b;
}

.hse-rules-box {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 10px;
}

.hse-rules-head {
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hse-rules-items {
  margin: 0;
  padding-left: 16px;
  font-size: 10.5px;
  color: #e2e8f0;
  line-height: 1.45;
}

.hse-rules-items li {
  margin-bottom: 4px;
}

.hse-panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.4);
  border: 1px dashed #334155;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.35;
}

.panel-highlight-pulse {
  animation: panelGlow 1.2s ease-out;
}

@keyframes panelGlow {
  0% { box-shadow: inset 0 0 0 2px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.6); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent; }
}

/* ==========================================================================
   LUCIDE ICONS VECTOR STYLING (MODERN & CRISP)
   ========================================================================== */
.lucide, .lucide-icon {
  display: inline-block;
  vertical-align: middle;
  stroke-width: 2px;
  stroke: currentColor;
  flex-shrink: 0;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg.lucide, .btn-icon .lucide-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2px;
  vertical-align: -1px;
}

.tool-btn svg.lucide {
  width: 13px;
  height: 13px;
  stroke-width: 2px;
  vertical-align: -1px;
}

.unit-btn svg.lucide, .lang-btn svg.lucide {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  stroke-width: 2px;
  vertical-align: -2px;
}

.preset-btn svg.lucide {
  width: 12px;
  height: 12px;
  stroke-width: 2px;
  vertical-align: -1px;
}

.canvas-floating-toolbar .tool-btn svg.lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2px;
}

.zoom-btn svg.lucide {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
}

.equip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.equip-icon svg.lucide {
  width: 22px;
  height: 22px;
  stroke-width: 1.85px;
}

.logo-icon svg.lucide {
  width: 20px;
  height: 20px;
  stroke-width: 2px;
  color: #38bdf8;
}

.header-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}

.header-icon-badge svg.lucide {
  width: 12px;
  height: 12px;
  stroke-width: 2px;
}

/* ========================================================================= */
/* MODAL: EXPLORADOR Y BIBLIOTECA 3D DE EQUIPOS                              */
/* ========================================================================= */
#modal-catalog-explorer {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(4, 7, 12, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
}
#modal-catalog-explorer:not(.open) {
  display: none !important;
}
#modal-catalog-explorer.open {
  display: flex !important;
}

.modal-catalog-window {
  width: 92vw;
  max-width: 1380px;
  height: 88vh;
  max-height: 860px;
  background: #090d14;
  border: 1px solid #1e293b;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0,0,0,0.85), 0 0 25px rgba(2,132,199,0.18);
}
.modal-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(90deg, #0e1522, #131c2d);
  border-bottom: 1px solid #1f2937;
}
.modal-catalog-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-catalog-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(2,132,199,0.4);
}
.modal-catalog-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: #f3f4f6;
  margin: 0;
  letter-spacing: -0.2px;
}
.modal-catalog-subtitle {
  font-size: 11px;
  color: #9ca3af;
}
.modal-close-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}
.modal-close-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.modal-catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #0d131c;
  border-bottom: 1px solid #1a2332;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.modal-search-wrap {
  position: relative;
  min-width: 280px;
  display: flex;
  align-items: center;
}
.modal-search-icon {
  position: absolute;
  left: 10px;
  color: #64748b;
  pointer-events: none;
  width: 15px;
  height: 15px;
}
.modal-search-input {
  width: 100%;
  background: #141b24;
  border: 1px solid #283548;
  color: #f3f4f6;
  padding: 7px 10px 7px 32px;
  border-radius: 6px;
  font-size: 11.5px;
}
.modal-search-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56,189,248,0.25);
}
.modal-discipline-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.modal-catalog-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.modal-catalog-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-content: start;
}
.modal-equip-card {
  background: #101722;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .18s;
  position: relative;
}
.modal-equip-card:hover {
  background: #162132;
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.modal-equip-card.selected {
  background: #0f2238;
  border-color: #0284c7;
  box-shadow: 0 0 14px rgba(2,132,199,0.4);
}
.modal-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #090d14;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid #1f2937;
  flex-shrink: 0;
}
.modal-card-title {
  font-size: 11px;
  font-weight: 700;
  color: #f3f4f6;
  line-height: 1.2;
}
.modal-card-desc {
  font-size: 9.5px;
  color: #9ca3af;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 9px;
  color: #64748b;
  border-top: 1px solid #1b2433;
  padding-top: 6px;
}
.modal-card-dims {
  font-family: 'JetBrains Mono', monospace;
  background: #151f2d;
  padding: 2px 5px;
  border-radius: 4px;
  color: #38bdf8;
  font-weight: 600;
}

/* PANEL DERECHO DE INSPECCIÓN 3D */
.modal-catalog-preview-pane {
  width: 420px;
  background: #080c13;
  border-left: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.preview-canvas-wrap {
  height: 310px;
  position: relative;
  background: radial-gradient(circle at center, #131c2d 0%, #06080d 100%);
  border-bottom: 1px solid #1e293b;
}
#canvas-modal-preview {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#canvas-modal-preview:active {
  cursor: grabbing;
}
.preview-controls-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.preview-hint {
  font-size: 9px;
  color: #94a3b8;
  background: rgba(10,15,22,0.85);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  border: 1px solid #1e293b;
}
.preview-autorotate-label {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #f3f4f6;
  background: rgba(10,15,22,0.85);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  border: 1px solid #1e293b;
  cursor: pointer;
}
.preview-autorotate-label input {
  accent-color: #0284c7;
  cursor: pointer;
}
.preview-details-card {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.preview-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.preview-title-text h3 {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}
.preview-title-text .preview-id-badge {
  font-size: 9.5px;
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  background: #0e2035;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px;
}
.preview-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #0c111a;
  border: 1px solid #1a2332;
  border-radius: 6px;
  padding: 10px;
}
.preview-spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.preview-spec-lbl {
  font-size: 8.5px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.preview-spec-val {
  font-size: 10.5px;
  font-weight: 600;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
}
.preview-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.preview-discipline-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #151e2b;
  border: 1px solid #283548;
  color: #94a3b8;
}
.preview-desc-text {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.45;
  background: #0b0f17;
  border-left: 3px solid #0284c7;
  padding: 8px 10px;
  border-radius: 0 4px 4px 0;
}
.preview-actions {
  padding: 12px 16px;
  background: #0b0f17;
  border-top: 1px solid #1e293b;
}
.btn-insert-from-modal {
  width: 100%;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #059669, #047857);
  border: 1px solid #10b981;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
  box-shadow: 0 4px 12px rgba(5,150,105,0.35);
}
.btn-insert-from-modal:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 16px rgba(16,185,129,0.5);
  transform: translateY(-1px);
}

/* ==========================================================================
   PANTALLA DE CARGA TECNOLÓGICA (SPLASH SCREEN / PRELOADER INDUSTRIAL)
   ========================================================================== */
.app-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060913;
  overflow: hidden;
  user-select: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
}

.app-preloader.preloader-fade-out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  visibility: hidden;
}

.preloader-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(14, 165, 233, 0.14) 0%, rgba(6, 9, 19, 0.95) 60%, #03050a 100%);
  z-index: 1;
}

.preloader-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.65;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  z-index: 1;
}

.preloader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  width: 90%;
}

.preloader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader-logo-ring {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 32px rgba(14, 165, 233, 0.22), inset 0 0 16px rgba(14, 165, 233, 0.15);
  background: radial-gradient(circle, rgba(15, 23, 42, 0.8) 0%, rgba(6, 9, 19, 0.9) 100%);
}

.preloader-radar-beam {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border-top: 2.5px solid #38bdf8;
  border-right: 2.5px solid transparent;
  animation: preloaderRadarSpin 1.8s linear infinite;
  filter: drop-shadow(0 0 8px #38bdf8);
}

.preloader-radar-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  animation: preloaderPing 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.preloader-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5));
  animation: preloaderLogoPulse 2.8s ease-in-out infinite;
  z-index: 3;
}

.preloader-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #f8fafc;
  margin: 0;
  font-family: 'Inter', sans-serif;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.preloader-title .accent-orange {
  color: #f59e0b;
}

.preloader-badge-version {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

.preloader-subtitle {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
}

.preloader-progress-box {
  width: 100%;
  max-width: 440px;
  margin-top: 26px;
}

.preloader-progress-bar {
  position: relative;
  height: 5px;
  width: 100%;
  background: #0f172a;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #1e293b;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.preloader-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #f59e0b);
  border-radius: 6px;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.75);
}

.preloader-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.preloader-status-text {
  color: #94a3b8;
  letter-spacing: 0.3px;
  transition: opacity 0.15s ease;
}

.preloader-percent {
  color: #38bdf8;
  font-weight: 700;
  min-width: 38px;
  text-align: right;
}

.preloader-telemetry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 9px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 1.2px;
}

.telemetry-badge {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #1e293b;
  padding: 3px 8px;
  border-radius: 4px;
}

.telemetry-divider {
  color: #334155;
}

@keyframes preloaderRadarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes preloaderPing {
  0% { transform: scale(0.9); opacity: 0.8; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes preloaderLogoPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.85));
  }
}

/* ==========================================================================
   HUD TÁCTICO DE TRANSICIÓN DE LOCACIÓN Y PLANTILLAS
   ========================================================================== */
.location-transition-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 88;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.location-transition-hud.active {
  opacity: 1;
}

.transition-hud-card {
  background: rgba(10, 16, 26, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  min-width: 320px;
  max-width: 480px;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.location-transition-hud.active .transition-hud-card {
  transform: scale(1);
}

.transition-hud-radar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.7);
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.2);
  flex-shrink: 0;
}

.transition-radar-sweep {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 65%, rgba(56, 189, 248, 0.6) 100%);
  animation: transitionRadarSpin 1.1s linear infinite;
}

.transition-radar-center {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  z-index: 2;
}

.transition-hud-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.transition-hud-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #38bdf8;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.transition-hud-title {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transition-hud-meta {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transition-meta-sep {
  color: #475569;
}

.transition-hud-scanline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8, #10b981);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}

.location-transition-hud.active .transition-hud-scanline {
  animation: transitionScanline 0.8s linear forwards;
}

@keyframes transitionRadarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes transitionScanline {
  0% { width: 0%; opacity: 1; }
  85% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ==========================================================================
   CONTROL DE GIRO DE PRECISIÓN (1° A 1°) Y AUTO-ALINEACIÓN DE CAMPAMENTO
   ========================================================================== */

.rot-precision-block {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rot-precision-block:hover {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.1);
}