/* Visor 360 · MapperGis */
:root {
  --fondo: rgba(10, 19, 30, .88);
  --fondo-solido: #0c1724;
  --borde: rgba(255, 255, 255, .10);
  --texto: #e6eef6;
  --suave: #8ea6ba;
  --acento: #ffd21f;
  --acento-texto: #1d1600;
  --azul: #5cc8ff;
  --ok: #8fe08a;
  --alerta: #ffb347;
  --error: #ff8f80;
  --sombra: 0 4px 18px rgba(0, 0, 0, .45);
  --radio: 10px;
  --barra-alto: 34px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; width: 100%; overflow: hidden; background: #0b1520;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; color: var(--texto);
}
button { font-family: inherit; }

#pano { position: absolute; inset: 0; }
#lienzo { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#pano.midiendo .pnlm-dragfix, #pano.midiendo .pnlm-render-container { cursor: crosshair !important; }

#cargando {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--fondo); padding: 9px 16px; border-radius: 8px;
  font-size: 13px; z-index: 70; display: none; box-shadow: var(--sombra);
}

/* ---------------- arriba: herramienta activa + ayuda ---------------- */
#arriba {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 130px);
}
.boton, #ayuda button, .panel button {
  font: 600 12px/1 system-ui, sans-serif; color: var(--texto); background: transparent;
  border: 1px solid transparent; border-radius: 7px; padding: 6px 9px; cursor: pointer; white-space: nowrap;
}
#ayuda button:hover, .panel button:hover { background: rgba(255, 255, 255, .1); }
#ayuda button, .panel button { background: rgba(255, 255, 255, .06); border-color: var(--borde); }
button:disabled { opacity: .35; cursor: default; }
button:disabled:hover { background: rgba(255, 255, 255, .06); }

/* boton con la herramienta activa: abre la rueda */
#hud-herr {
  display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 5px; cursor: pointer;
  border-radius: 99px; border: 1px solid var(--borde); background: var(--fondo);
  box-shadow: var(--sombra); backdrop-filter: blur(6px); color: var(--texto);
  font: 700 13px/1 system-ui, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
}
#hud-herr:hover { background: rgba(16, 29, 44, .95); }
#hud-herr.con-herr { border-color: currentColor; box-shadow: var(--sombra), 0 0 16px -5px currentColor; }
#hud-ico {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border: 1.5px solid currentColor;
}
#hud-ico svg { display: block; }
#hud-nom { color: var(--texto); }
.hud-tecla {
  font: 600 10.5px/1 system-ui, sans-serif; color: var(--suave);
  border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px;
}

#ayuda {
  display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px;
  padding: 7px 12px; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra); backdrop-filter: blur(6px); font-size: 12.5px; max-width: 100%;
}

/* ---------------- rueda de herramientas ---------------- */
#rueda {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: radial-gradient(circle at 50% 50%, rgba(4, 9, 15, .62), rgba(4, 9, 15, .30) 70%);
  user-select: none;
}
#rueda.abierta { display: block; }
#rueda-svg, #rueda-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#rueda-svg svg { display: block; overflow: visible; animation: rueda-entra .16s ease-out; }
@keyframes rueda-entra { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
#rueda .seg { cursor: pointer; }
#rueda .seg-fondo {
  fill: rgba(11, 21, 33, .86); stroke: rgba(255, 255, 255, .13); stroke-width: 1;
  transition: fill .1s, stroke .1s;
}
#rueda .seg text { fill: #d7e3ee; text-anchor: middle; font-family: system-ui, sans-serif; font-weight: 600; }
#rueda .seg text.tecla { fill: var(--suave); font-weight: 700; opacity: .75; }
#rueda .seg.activa .seg-fondo { fill: rgba(30, 46, 64, .92); stroke: currentColor; stroke-width: 1.4; }
#rueda .seg.marcada .seg-fondo { fill: rgba(42, 62, 84, .96); stroke: currentColor; stroke-width: 2.6; filter: url(#rueda-brillo); }
#rueda .seg.marcada text { fill: #fff; }
#rueda-centro {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 50%; padding: 12px; text-align: center; overflow: hidden; pointer-events: none;
  background: rgba(8, 15, 24, .94); border: 1px solid var(--borde); box-shadow: inset 0 0 22px rgba(0, 0, 0, .5);
}
#rueda-centro .c-ico svg { display: block; }
#rueda-centro .c-nom { font: 800 15px/1.15 system-ui, sans-serif; }
#rueda-centro .c-grupo { font: 700 10px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
#rueda-centro .c-desc { font-size: 11px; line-height: 1.3; color: var(--suave); margin-top: 2px; }

/* ---------------- dock de ventanas ---------------- */
#dock { position: absolute; top: 10px; right: 12px; z-index: 60; display: flex; flex-direction: column; gap: 7px; }
#dock button {
  position: relative; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  box-shadow: var(--sombra); backdrop-filter: blur(6px); transition: color .15s, border-color .15s, background .15s;
}
#dock button:hover { background: rgba(16, 29, 44, .95); }
#dock button.abierto { color: var(--acento); border-color: rgba(255, 210, 31, .6); }
#dock .d-ico svg { display: block; }
#dock .d-num {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--acento); color: var(--acento-texto); font: 800 10.5px/18px system-ui, sans-serif; text-align: center;
}

/* ---------------- ventanas flotantes (se arrastran por el titulo) ---------------- */
.ventana {
  position: absolute; top: 10px; right: 64px; z-index: 56; display: none; flex-direction: column;
  width: min(330px, calc(100vw - 84px)); max-height: calc(100vh - 70px);
  background: rgba(10, 19, 30, .95); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
  opacity: .93; transform-origin: top right; transition: opacity .14s, transform .14s;
}
.ventana:hover { opacity: 1; }
.ventana.saliendo { opacity: 0; transform: scale(.55); }
.v-cab {
  display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 12px; cursor: move;
  border-bottom: 1px solid var(--borde); background: rgba(255, 255, 255, .035);
  border-radius: 12px 12px 0 0; user-select: none; touch-action: none;
}
.v-ico { color: var(--acento); display: flex; }
.v-tit { flex: 1; font: 800 13px/1 system-ui, sans-serif; color: var(--acento); }
.panel .v-min { width: 26px; height: 26px; padding: 0; font: 700 16px/1 system-ui, sans-serif; background: transparent; border-color: transparent; }
.panel .v-min:hover { background: rgba(255, 255, 255, .1); }
.v-cuerpo { padding: 10px 12px 12px; overflow: auto; flex: 1; }
#m-texto { line-height: 1.35; }
#m-aviso { width: 100%; text-align: center; font-weight: 600; }
#m-aviso:empty { display: none; }
#m-aviso.error { color: var(--error); }
#m-aviso.ok { color: var(--ok); }

/* ---------------- minimapa ---------------- */
#mapa-caja {
  position: absolute; left: 12px; bottom: calc(var(--barra-alto) + 10px); z-index: 40;
  width: min(300px, 32vw); height: min(210px, 30vh); min-width: 160px; min-height: 120px;
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
  border: 2px solid rgba(255, 255, 255, .22); background: #1a2a39;
  transition: width .18s, height .18s;
}
#mapa { position: absolute; inset: 0; }
#mapa-plegar {
  position: absolute; left: 6px; top: 6px; z-index: 1000; width: 28px; height: 28px;
  border: 0; border-radius: 6px; background: rgba(10, 19, 30, .82); color: var(--texto);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#mapa-plegar:hover { background: rgba(10, 19, 30, .95); }
#mapa-caja.plegado { width: 40px; height: 40px; min-width: 0; min-height: 0; border-width: 1px; }
#mapa-caja.plegado #mapa { visibility: hidden; }
#mapa-caja.plegado #mapa-plegar { inset: 0; width: 100%; height: 100%; border-radius: 0; }
.leaflet-control-layers { border-radius: 7px !important; }
.leaflet-control-layers-toggle { width: 30px !important; height: 30px !important; background-size: 18px !important; }

/* ---------------- barra inferior ---------------- */
#barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--barra-alto); z-index: 45;
  display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: linear-gradient(0deg, rgba(8, 15, 24, .96), rgba(8, 15, 24, .80));
  border-top: 1px solid var(--borde);
  font-size: 12px; white-space: nowrap; overflow: hidden;
}
#barra span { overflow: hidden; text-overflow: ellipsis; }
#b-nombre { font-weight: 700; color: var(--azul); }
#b-coord, #b-xy, #b-rumbo { color: #c7d6e3; }
#b-cal { padding: 2px 8px; border-radius: 99px; font-weight: 600; font-size: 11px; }
#b-cal:empty { display: none; }
#b-cal.cal-sin { background: rgba(255, 179, 71, .16); color: var(--alerta); }
#b-cal.cal-global, #b-cal.cal-tramo { background: rgba(143, 224, 138, .14); color: var(--ok); }
#btn-predio {
  display: none; margin-left: auto; flex-shrink: 0; cursor: pointer;
  background: var(--acento); color: var(--acento-texto); border: 0; border-radius: 6px;
  padding: 5px 10px; font: 700 12px system-ui, sans-serif;
}
#btn-predio:hover { filter: brightness(1.08); }

/* Produccion: sin nombre de foto, coordenadas, rumbo ni estado de calibracion.
   Solo queda el boton "Mirar al predio". Para volver a mostrarlos, borrar este bloque. */
#b-nombre, #b-xy, #b-coord, #b-rumbo, #b-cal { display: none !important; }
#barra { background: none; border-top: 0; pointer-events: none; }
#btn-predio { pointer-events: auto; }

/* ---------------- marca ---------------- */
#marca {
  position: absolute; right: 12px; bottom: calc(var(--barra-alto) + 10px); z-index: 30;
  display: flex; align-items: center; gap: 7px; pointer-events: none; user-select: none;
  padding: 5px 10px 5px 6px; border-radius: 99px;
  background: rgba(10, 19, 30, .55); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(3px); opacity: .92;
}
#marca svg { display: block; }
#marca .nombre { font: 800 14px/1 system-ui, sans-serif; letter-spacing: .01em; color: #fff; }
#marca .nombre b { color: var(--acento); font-weight: 800; }

/* ---------------- navegacion en la foto ---------------- */
.flecha360 {
  width: 44px; height: 44px; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, #ffd37a, #ff9e2c);
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center; transition: transform .1s;
}
.flecha360:hover { transform: scale(1.15); }
.flecha360::after {
  content: ""; width: 0; height: 0; margin-top: -2px;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid #4a2a00;
}
.flecha-predio {
  width: 40px; height: 52px; cursor: pointer;
  margin-top: -26px;   /* Pannellum centra el div; asi la punta queda sobre el punto */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.flecha-predio svg { display: block; }
.punto-actual {
  width: 14px; height: 14px; background: #ff7a18; border: 3px solid #fff;
  border-radius: 50%; box-shadow: 0 0 6px rgba(0, 0, 0, .6);
}
.rotulo-medida { background: var(--acento); color: var(--acento-texto); border: 0; font-weight: 700; padding: 0 4px; box-shadow: none; }
.rotulo-medida::before { display: none; }

/* ---------------- contenido de las ventanas (medidas y calibracion) ---------------- */
.panel { font-size: 12.5px; }
.panel-pie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.panel label { display: block; margin: 8px 0; color: var(--suave); }
.panel select, .panel input {
  display: block; width: 100%; margin-top: 4px; padding: 6px;
  background: #13212e; color: var(--texto); border: 1px solid var(--borde); border-radius: 6px; font-size: 12.5px;
}
.panel button.peligro { color: #ffb0a6; }
.panel ul { list-style: none; }
#lista-medidas li { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 8px 0; }
#lista-medidas li.vacio { color: var(--suave); border: 0; }
.m-tit { display: flex; align-items: center; gap: 6px; }
.m-tit b { flex: 1; }
.m-tit button { padding: 3px 7px; font-size: 11px; }
.m-val { color: var(--acento); font-weight: 700; margin-top: 3px; }
.m-det { color: var(--suave); font-size: 11.5px; margin-top: 2px; }
.aviso-cal { color: var(--alerta); }
#cal-actual { color: var(--suave); font-size: 11.5px; }
#cal-muestras li { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
#cal-muestras .res { color: var(--suave); }
#cal-muestras button { padding: 2px 6px; margin-left: auto; }
#cal-resultado { margin-top: 8px; line-height: 1.5; }

/* ---------------- pantallas angostas (panel de kfields) ---------------- */
@media (max-width: 1000px) {
  .hud-tecla { display: none; }
}
@media (max-width: 820px) {
  :root { --barra-alto: 30px; }
  #b-coord { display: none; }
  #barra { gap: 12px; font-size: 11.5px; }
  #mapa-caja { width: 190px; height: 140px; min-width: 0; min-height: 0; }
  #marca .nombre { font-size: 12px; }
}
@media (max-width: 560px) {
  #b-rumbo, #b-xy { display: none; }
  #mapa-caja { width: 150px; height: 112px; }
  #marca .nombre { display: none; }
  #marca { padding: 4px; }
  #arriba { max-width: calc(100vw - 110px); }
  #hud-nom { display: none; }
  #hud-herr { padding-right: 5px; }
  #dock button { width: 36px; height: 36px; }
  .ventana { right: 54px; width: calc(100vw - 66px); }
}
@media (max-height: 520px) {
  #mapa-caja { height: 110px; width: 150px; }
}