*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg-main:#020617;
  --bg-panel:rgba(15,23,42,0.96);
  --bg-panel-soft:rgba(15,23,42,0.85);
  --border-soft:rgba(148,163,184,0.35);
  --accent:#22d3ee;
  --accent-2:#38bdf8;
  --accent-soft:rgba(56,189,248,0.15);
  --text-main:#e5e7eb;
  --text-soft:#9ca3af;
  --danger:#fb7185;
}

html,body{
  height:100%;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#020617 0,#020617 40%,#000 100%);
  color:var(--text-main);
  overflow:hidden;
}

#app{
  display:flex;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* PANELS ---------------------------------------------------- */

.panel{
  width:290px;
  max-width:100%;
  background:var(--bg-panel);
  border-right:1px solid var(--border-soft);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  backdrop-filter:blur(20px);
  box-shadow:0 0 40px rgba(0,0,0,0.7);
  z-index:10;
}

#right-panel{
  border-right:none;
  border-left:1px solid var(--border-soft);
}

header h1{
  font-size:20px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

header h2{
  font-size:17px;
}

.subtitle{
  font-size:11px;
  color:var(--text-soft);
  margin-top:3px;
}

.right-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.panel-block{
  border-radius:14px;
  background:radial-gradient(circle at top,var(--bg-panel-soft) 0,rgba(15,23,42,0.9) 55%,rgba(15,23,42,0.98) 100%);
  border:1px solid rgba(30,64,175,0.45);
  padding:10px 11px;
  box-shadow:0 0 20px rgba(15,23,42,0.9);
}

.panel-block+.panel-block{
  margin-top:4px;
}

.panel-block h2,
.panel-block h3{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-soft);
  margin-bottom:7px;
}

.label-top{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-soft);
}

.editor-tool-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px;
}

.editor-tool-name{
  font-size:14px;
  font-weight:600;
}

.editor-wall-settings{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.editor-wall-settings label{
  font-size:11px;
  color:var(--text-soft);
}

.editor-wall-settings input{
  flex:1;
  background:rgba(15,23,42,0.9);
  border-radius:999px;
  border:1px solid var(--border-soft);
  color:var(--text-main);
  font-size:12px;
  padding:4px 8px;
}

/* LEFT PANEL CONTROLS --------------------------------------- */

.mode-buttons{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
}

.mode-btn{
  width:100%;
}

.toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-soft);
}

.toggle input{
  accent-color:var(--accent);
}

.keys{
  list-style:none;
  font-size:11px;
  color:var(--text-soft);
  display:flex;
  flex-direction:column;
  gap:3px;
}

.keys span{
  display:inline-block;
  min-width:96px;
  font-family:monospace;
  color:var(--text-main);
}

/* BUTTONS --------------------------------------------------- */

button{
  border:none;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  background:linear-gradient(135deg,#22d3ee,#4ade80);
  color:#020617;
  box-shadow:0 0 16px rgba(56,189,248,0.28);
  transition:transform 0.08s ease,box-shadow 0.08s ease,background 0.1s ease;
}

button.primary.full{
  width:100%;
}

button.ghost{
  background:rgba(15,23,42,0.2);
  color:var(--text-main);
  border:1px solid var(--border-soft);
  box-shadow:none;
}

button.tiny{
  padding:4px 9px;
  font-size:11px;
}

button.danger{
  background:rgba(248,113,113,0.1);
  color:#fecaca;
  border:1px solid rgba(248,113,113,0.7);
  box-shadow:none;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(56,189,248,0.4);
}

button:active{
  transform:translateY(0);
  box-shadow:0 0 10px rgba(56,189,248,0.2);
}

/* CENTRAL PANEL / MAPA -------------------------------------- */

#center-panel{
  flex:1;
  position:relative;
  background:radial-gradient(circle at top,#0b1120 0,#020617 40%,#000 100%);
  overflow:hidden;
}

#mapCanvas{
  width:100%;
  height:100%;
  display:block;
}

/* HUD 2D ---------------------------------------------------- */

.hud{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  gap:10px;
  padding:6px 10px;
  background:rgba(15,23,42,0.8);
  border-radius:999px;
  border:1px solid rgba(30,64,175,0.65);
  font-size:11px;
  backdrop-filter:blur(14px);
}

.hud-group{
  display:flex;
  gap:4px;
}

.hud-label{
  color:var(--text-soft);
}

.hud-value{
  color:var(--text-main);
  font-weight:500;
}

#editor-hud{
  position:absolute;
  right:14px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.6);
  background:rgba(8,47,73,0.85);
  font-size:11px;
  display:flex;
  gap:6px;
  align-items:center;
}

#bottom-bar{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  padding:4px 10px;
  font-size:10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.45);
  background:rgba(15,23,42,0.8);
  color:var(--text-soft);
}

.mini-sep{
  margin:0 7px;
}

/* LISTAS EDITOR --------------------------------------------- */

.editor-tool-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-bottom:6px;
}

.editor-tool-btn{
  padding:6px 8px;
  border-radius:10px;
  background:radial-gradient(circle at top,rgba(15,118,110,0.28),rgba(15,23,42,0.95));
  border:1px solid rgba(34,197,235,0.45);
  color:var(--text-main);
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.editor-tool-btn .tool-main{
  font-size:12px;
  font-weight:500;
}

.editor-tool-btn .tool-sub{
  font-size:10px;
  color:var(--text-soft);
}

.editor-tool-btn.active{
  box-shadow:0 0 16px rgba(56,189,248,0.7);
  border-color:#22d3ee;
}

.editor-list,
.markers-list{
  list-style:none;
  margin-top:4px;
  max-height:140px;
  overflow:auto;
  padding-right:4px;
}

.editor-item,
.marker-item{
  padding:5px 6px;
  border-radius:9px;
  border:1px solid rgba(30,64,175,0.6);
  background:rgba(15,23,42,0.85);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px;
  font-size:11px;
}

.editor-item+.editor-item,
.marker-item+.marker-item{
  margin-top:4px;
}

.editor-item-main,
.marker-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.editor-item-label,
.marker-label{
  font-weight:500;
}

.editor-item-meta,
.marker-coords{
  color:var(--text-soft);
}

.editor-item-actions,
.marker-actions{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.marker-form{
  margin-top:6px;
  margin-bottom:6px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.marker-form input{
  background:rgba(15,23,42,0.9);
  border-radius:999px;
  border:1px solid var(--border-soft);
  color:var(--text-main);
  font-size:12px;
  padding:4px 8px;
}

/* ESTADO DB ------------------------------------------------- */

.status{
  margin-top:6px;
  font-size:11px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.45);
  color:var(--text-soft);
}

.status-ok{
  border-color:rgba(34,197,94,0.7);
  color:#bbf7d0;
}

.status-error{
  border-color:rgba(248,113,113,0.8);
  color:#fecaca;
}

/* OVERLAY 3D ------------------------------------------------ */

.wall3d-overlay{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,#020617 0,#020617 55%,#000 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  transition:opacity 0.18s ease,transform 0.18s ease;
}

.wall3d-hidden{
  opacity:0;
  pointer-events:none;
  transform:scale(0.96);
}

.wall3d-panel{
  width:96%;
  height:92%;
  max-width:1200px;
  max-height:720px;
  background:var(--bg-panel);
  border-radius:22px;
  border:1px solid rgba(30,64,175,0.7);
  box-shadow:0 30px 120px rgba(15,23,42,0.9);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.wall3d-header{
  padding:10px 14px;
  border-bottom:1px solid rgba(30,64,175,0.7);
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:radial-gradient(circle at top,#020617 0,rgba(15,23,42,0.96) 55%);
}

.wall3d-body{
  flex:1;
  display:flex;
  min-height:0;
}

/* Reusamos los IDs del visor 3D interno -------------------- */

#side-panel{
  width:260px;
  background:var(--bg-panel-soft);
  border-right:1px solid var(--border-soft);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

#side-panel section h2{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-soft);
  margin-bottom:6px;
}

.field{
  margin-bottom:8px;
  font-size:11px;
}

.field label{
  display:block;
  margin-bottom:3px;
  color:var(--text-soft);
}

.field input[type="range"]{
  width:100%;
}

.hint{
  font-size:10px;
  color:var(--text-soft);
}

textarea{
  width:100%;
  background:rgba(15,23,42,0.9);
  border:1px solid var(--border-soft);
  border-radius:10px;
  color:var(--text-main);
  padding:6px 8px;
  font-size:11px;
  resize:vertical;
}

#status{
  margin-top:6px;
  font-size:10px;
  color:var(--text-soft);
  white-space:pre-wrap;
}

#viewport{
  flex:1;
  position:relative;
  background:radial-gradient(circle at top,#020617 0,#020617 30%,#000 100%);
}

#view3d{
  width:100%;
  height:100%;
  display:block;
}

.hud-3d{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  gap:10px;
  padding:6px 10px;
  background:rgba(15,23,42,0.8);
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.5);
  font-size:11px;
  backdrop-filter:blur(14px);
}

.hud-3d span+span{
  margin-left:8px;
}

@media (max-width:960px){
  .panel{display:none;}
  #center-panel{flex:1;}
}