body { background:#111; }
.card { background:#1c1f24; color:#eee; border:1px solid #2a2f36; }
.card .form-label { color:#bbb; }
.card .form-control, .card .form-select { background:#0f1115; color:#eee; border-color:#2a2f36; }
.viewer-wrap { position:relative; width:100%; height:calc(100vh - 56px); background:#000; }
.viewer-wrap canvas { display:block; }
.tools-panel {
  position:absolute; top:12px; left:12px; z-index:10;
  background:rgba(20,22,28,.92); border:1px solid #333; padding:10px;
  border-radius:8px; color:#eee;
  width: 260px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-sizing: border-box;
}
.tools-panel::-webkit-scrollbar { width:6px; }
.tools-panel::-webkit-scrollbar-thumb { background:#444; border-radius:3px; }
.tools-panel h6 { margin:0 0 6px; }
.lote-list { max-height: 35vh; overflow:auto; }
.lote-item { display:flex; align-items:center; gap:6px; padding:4px; border-radius:4px; cursor:pointer; }
.lote-item:hover { background:#222; }
.lote-swatch { width:14px; height:14px; border-radius:3px; border:1px solid #555; }
.legend { position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,.7); padding:10px 14px; border-radius:8px; font-size:13px; min-width:140px; }
.legend-title { color:#ddd; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #333; }
.legend-row { display:flex; align-items:center; gap:8px; padding:2px 0; color:#eee; }
.legend-row b { margin-left:auto; }
.legend-dot { width:14px; height:14px; border-radius:3px; display:inline-block; }
.pano-thumbs { position:absolute; bottom:12px; right:12px; display:flex; gap:6px; }
.pano-thumbs img { width:80px; height:45px; object-fit:cover; border:2px solid #444; border-radius:4px; cursor:pointer; }
.pano-thumbs img.active { border-color:#22c55e; }
.hotspot-marker { position:absolute; width:28px; height:28px; margin:-14px 0 0 -14px;
  background:transparent; border:none; border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;
  pointer-events:auto; font-size:24px; font-weight:bold;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.lote-popup {
  position:absolute; transform:translate(-50%, calc(-100% - 14px));
  background:rgba(20,22,28,.96); color:#eee;
  border:1px solid #3a3f48; border-radius:8px;
  padding:6px 8px; min-width:140px; max-width:210px;
  font-size:12px; box-shadow:0 6px 20px rgba(0,0,0,.5);
  z-index:20;
}
.lote-popup::after {
  content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:rgba(20,22,28,.96);
}
.lote-popup .lp-head {
  display:flex; justify-content:space-between; align-items:center;
  padding-left:8px; margin-bottom:4px;
}
.lote-popup .lp-close { cursor:pointer; color:#888; font-size:18px; line-height:1; padding:0 4px; }
.lote-popup .lp-close:hover { color:#fff; }
.lote-popup .lp-row {
  display:flex; justify-content:space-between; gap:10px;
  padding:1px 0; border-top:1px solid #2a2f36;
}
.lote-popup .lp-row span { color:#aaa; }
.lote-popup .lp-wa-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:6px; padding:6px 10px; background:#25D366; color:#fff;
  text-decoration:none; border-radius:6px; font-weight:600; font-size:12px;
}
.lote-popup .lp-wa-btn:hover { background:#1da856; color:#fff; }
.lote-popup .lp-notas {
  margin-top:6px; padding-top:6px; border-top:1px solid #2a2f36;
  color:#ccc; font-size:12px; white-space:pre-wrap;
}
.brand-logo {
  position:absolute; top:14px; max-height:80px; max-width:200px;
  z-index:15; pointer-events:none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.brand-left  { left:14px; }
.brand-right { right:14px; }
.viewer-wrap .tools-panel + .brand-left { left: 290px; }

.ctx-menu {
  position:fixed; z-index:1000; background:#1c1f24; border:1px solid #3a3f48;
  border-radius:6px; padding:4px 0; min-width:200px;
  box-shadow:0 8px 24px rgba(0,0,0,.6); color:#eee; font-size:14px;
}
.ctx-menu .ctx-item { padding:8px 14px; cursor:pointer; user-select:none; }
.ctx-menu .ctx-item:hover { background:#2a2f36; }
.ctx-menu .ctx-danger { color:#f87171; }
.ctx-menu .ctx-danger:hover { background:#3a1f24; }

.pano-text {
  position:absolute; transform:translate(-50%, -50%);
  white-space:nowrap; pointer-events:auto; cursor:pointer;
  text-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6);
  user-select:none;
}

.manzanero-pin {
  position:absolute; transform:translate(-50%, -100%);
  width:40px; pointer-events:auto; cursor:pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.manzanero-pin .mzp-body {
  width:40px; height:40px; background:#16a34a; border:2px solid #fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:bold; font-size:18px; line-height:1;
}
.manzanero-pin .mzp-tail {
  width:0; height:0; margin:-2px auto 0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:14px solid #16a34a;
}
.manzanero-pin:hover .mzp-body { background:#15803d; }

@keyframes hotspot-radar {
  0% {
    box-shadow:
      0 0 0 0 rgba(255,255,255,0.8),
      0 0 0 0 rgba(255,255,255,0.6),
      0 0 0 0 rgba(255,255,255,0.4);
  }
  40% {
    box-shadow:
      0 0 0 20px rgba(255,255,255,0.4),
      0 0 0 40px rgba(255,255,255,0.2),
      0 0 0 0 rgba(255,255,255,0);
  }
  100% {
    box-shadow:
      0 0 0 40px rgba(255,255,255,0),
      0 0 0 80px rgba(255,255,255,0),
      0 0 0 120px rgba(255,255,255,0);
  }
}

@keyframes arrow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

.hotspot-marker {
  animation: arrow-pulse 1.5s ease-in-out infinite;
}

.hotspot-marker::before {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.8);
  animation: hotspot-radar 2s ease-out infinite;
}

.lote-label { position:absolute; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.7); color:#fff; padding:2px 6px; border-radius:4px;
  font-size:12px; pointer-events:none; }

/* ===== Galería de fotos/videos ===== */
@keyframes galeria-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.7); }
  100% { box-shadow: 0 0 0 18px rgba(59,130,246,0); }
}
.galeria-marker {
  position:absolute; width:28px; height:28px;
  margin:-14px 0 0 -14px;
  background:rgba(59,130,246,0.95);
  border:2px solid #fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  animation: galeria-pulse 1.6s ease-out infinite;
  z-index:5;
}
.galeria-marker svg { width:16px; height:16px; }
.galeria-marker:hover { background:rgba(37,99,235,1); }
.galeria-marker svg { display:block; }

.galeria-popup {
  position:absolute; transform:translate(-50%, -100%);
  width: auto;
  max-width:140px;
  background:transparent;
  border:none; border-radius:10px;
  color:#eee;
  z-index:30; overflow:hidden;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
  display: inline-block;
}
.galeria-popup.gp-large { max-width:320px; }
.galeria-popup .gp-head {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:rgba(15,17,21,0.85);
  border-radius:8px 8px 0 0;
}
.galeria-popup .gp-title { flex-grow:1; font-weight:600; font-size:14px; }
.galeria-popup .gp-resize, .galeria-popup .gp-close {
  cursor:pointer; padding:0 6px; color:#aaa; font-size:18px; line-height:1;
}
.galeria-popup .gp-resize:hover, .galeria-popup .gp-close:hover { color:#fff; }
.galeria-popup .gp-body {
  background:transparent; display:block;
  min-height:0; max-height:25vh;
  line-height: 0;
}
.galeria-popup .gp-body img,
.galeria-popup .gp-body video {
  display:block;
  max-width:100%; max-height:25vh;
  width:auto; height:auto;
  background:transparent;
}
.galeria-popup.gp-large .gp-body { max-height: 55vh; }
.galeria-popup.gp-large .gp-body img,
.galeria-popup.gp-large .gp-body video { max-height: 55vh; }
.galeria-popup .gp-head { padding:6px 10px; }
.galeria-popup .gp-title { font-size:12px; }
.galeria-popup .gp-nav { padding:4px 8px; }
.galeria-popup .gp-btn { padding:2px 10px; font-size:13px; }
.galeria-popup .gp-counter { font-size:11px; }
.galeria-popup .gp-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px; background:rgba(15,17,21,0.85);
  border-radius:0 0 8px 8px;
}
.galeria-popup .gp-btn {
  background:#1c1f24; border:1px solid #3a3f48; color:#fff;
  padding:4px 12px; border-radius:4px; cursor:pointer; font-size:14px;
}
.galeria-popup .gp-btn:hover:not(:disabled) { background:#2a2f36; }
.galeria-popup .gp-btn:disabled { opacity:0.4; cursor:not-allowed; }
.galeria-popup .gp-counter { font-size:12px; color:#bbb; }

/* ===== Responsive móvil ===== */
html, body { overflow-x: hidden; touch-action: manipulation; }

@media (max-width: 768px) {
  .viewer-wrap { height: calc(100vh - 50px); height: calc(100dvh - 50px); }
  .navbar { padding: 8px 12px !important; }
  .navbar-brand { font-size: 14px; }

  /* Logos más pequeños en móvil */
  .brand-logo { max-height: 50px; max-width: 110px; top: 8px; }
  .brand-left { left: 8px; }
  .brand-right { right: 8px; }

  /* Leyenda más compacta */
  .legend {
    bottom: 8px; left: 8px;
    padding: 6px 10px;
    font-size: 11px;
    min-width: 100px;
  }
  .legend-title { font-size: 12px; }
  .legend-dot { width: 10px; height: 10px; }

  /* Thumbnails de panorama más pequeños */
  .pano-thumbs { bottom: 8px; right: 8px; gap: 4px; }
  .pano-thumbs img { width: 56px; height: 32px; }

  /* Popup de lote ajustado */
  .lote-popup { min-width: 130px; max-width: calc(100vw - 32px); font-size: 11px; }
  .lote-popup .lp-wa-btn { padding: 5px 8px; font-size: 11px; }

  /* Popup de galería responsive */
  .galeria-popup { max-width: 120px; }
  .galeria-popup.gp-large { max-width: calc(100vw - 24px); }
  .galeria-popup .gp-body { max-height: 22vh; }
  .galeria-popup .gp-body img,
  .galeria-popup .gp-body video { max-height: 22vh; }
  .galeria-popup.gp-large .gp-body { max-height: 50vh; }
  .galeria-popup.gp-large .gp-body img,
  .galeria-popup.gp-large .gp-body video { max-height: 50vh; }

  /* Marcadores tap-friendly (32px) */
  .galeria-marker {
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
  }
  .galeria-marker svg { width: 18px; height: 18px; }
  .hotspot-marker {
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    font-size: 22px;
  }
  .hotspot-marker::before {
    width: 32px; height: 32px;
  }

  /* Manzanero */
  .manzanero-pin { width: 36px; }
  .manzanero-pin .mzp-body { width: 36px; height: 36px; font-size: 16px; }
}

@media (max-width: 480px) {
  .galeria-popup { width: calc(100vw - 16px); }
  .galeria-popup .gp-title { font-size: 13px; }
  .legend { font-size: 10px; padding: 5px 8px; min-width: 90px; }
  .pano-thumbs img { width: 48px; height: 28px; }
}

/* Soporte touch */
.galeria-marker, .hotspot-marker, .manzanero-pin {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}