/* Otero · visor de recorridos 360° (plantilla v2). El color de acento se cambia por sitio con `acento` en config.js. */
:root {
  --acento: #BF9F63;
  --oscuro: rgba(20, 20, 20, 0.72);
  --texto: #F4EFE6;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
html, body { margin: 0; height: 100%; background: #111; overflow: hidden; }
/* el ancho de cada elemento incluye su relleno (sin esto, los paneles se salen de su espacio) */
#recorrido, #recorrido *, #recorrido *::before, #recorrido *::after { box-sizing: border-box; }
#recorrido { position: fixed; inset: 0; width: 100%; height: 100%; color: var(--texto); }
/* el visor ocupa toda la pantalla (Photo Sphere Viewer le pone position: relative a su contenedor) */
.v-visor, .v-visor.psv-container { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
/* los paneles usan el atributo hidden; su display propio no debe anularlo */
.v-info[hidden], .v-vr[hidden] { display: none !important; }
.psv-loader { color: var(--acento) !important; }

/* botones */
.v-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--oscuro); color: var(--texto); font: 600 15px/1 inherit; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.v-boton:hover { background: rgba(20, 20, 20, 0.88); }
.v-boton:focus-visible, .v-menu__escena:focus-visible, .v-pin:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.v-icono { width: 44px; padding: 0; }
.v-boton svg { width: 22px; height: 22px; flex: none; }
.v-reservar { background: var(--acento); color: #1B1B1B; }
.v-reservar:hover { background: color-mix(in srgb, var(--acento) 80%, white); }
.v-whatsapp { color: #25D366; }

/* barras */
.v-arriba, .v-abajo {
  position: absolute; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px 14px; pointer-events: none;
}
.v-abajo { top: auto; bottom: 0; padding: 14px 14px max(14px, env(safe-area-inset-bottom, 0px)); }
.v-arriba { top: 0; }
.v-arriba > *, .v-abajo > * { pointer-events: auto; }
.v-arriba__botones, .v-abajo__acciones { display: flex; gap: 8px; }
.v-logo { max-height: 44px; max-width: 160px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }
.v-escena {
  flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* crédito debajo de los botones de WhatsApp y reservas (la barra de abajo sube para dejarle espacio) */
.v-credito {
  position: absolute; z-index: 20; right: 16px; bottom: max(8px, env(safe-area-inset-bottom, 0px));
  font-size: 12px; color: rgba(244, 239, 230, 0.85); text-decoration: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.v-con-credito .v-abajo { padding-bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 24px); }
.v-credito:hover { color: var(--acento); }

/* pines */
.v-pin {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--texto); cursor: pointer; font: 600 13px/1.2 inherit;
}
.v-pin__punto {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--acento); background: rgba(20, 20, 20, 0.35);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 60%, transparent); animation: v-latido 2.4s ease-out infinite;
  position: relative;
}
.v-pin__punto::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--acento); }
.v-pin__i {
  width: 30px; height: 30px; border-radius: 50%; background: var(--texto); color: #1B1B1B;
  display: grid; place-items: center; font: italic 700 17px/1 Georgia, serif;
}
.v-pin__nombre {
  max-width: 160px; padding: 4px 9px; border-radius: 6px; background: var(--oscuro); text-align: center;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s;
}
.v-pin:hover .v-pin__nombre, .v-pin:focus-visible .v-pin__nombre { opacity: 1; transform: none; }
@media (pointer: coarse) { .v-pin__nombre { opacity: 1; transform: none; } }
@keyframes v-latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px transparent; }
}

/* menú de espacios */
.v-menu {
  position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(340px, 88vw);
  background: rgba(20, 20, 20, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px);
  /* cerrado: fuera de la pantalla; se desliza al abrir */
  transform: translateX(-105%); visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s linear 0.38s;
}
.v-menu--abierto { transform: none; visibility: visible; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s; }
.v-menu-fondo {
  position: absolute; z-index: 25; inset: 0; background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.38s ease;
}
.v-menu--abierto ~ .v-menu-fondo, .v-menu-fondo:has(+ .v-menu--abierto) { opacity: 1; pointer-events: auto; }
.v-menu .v-menu__categoria { opacity: 0; transform: translateX(-12px); transition: opacity 0.3s ease, transform 0.3s ease; }
.v-menu--abierto .v-menu__categoria { opacity: 1; transform: none; }
.v-menu--abierto .v-menu__categoria:nth-child(2) { transition-delay: 0.06s; }
.v-menu--abierto .v-menu__categoria:nth-child(3) { transition-delay: 0.12s; }
.v-menu--abierto .v-menu__categoria:nth-child(n+4) { transition-delay: 0.18s; }
.v-menu__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 20px; }
.v-menu__titulo { font-size: 17px; }
.v-menu__lista { overflow-y: auto; padding: 0 12px 24px; }
.v-menu__categoria h3 {
  margin: 18px 8px 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento);
}
.v-menu__categoria ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v-menu__escena {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 10px;
  background: none; color: var(--texto); font: 500 15px/1.3 inherit; text-align: left; cursor: pointer;
}
.v-menu__escena img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }
.v-menu__escena:hover { background: rgba(255, 255, 255, 0.08); }
.v-menu__escena[aria-current="true"] { background: color-mix(in srgb, var(--acento) 22%, transparent); }

/* panel de información */
.v-info { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.45); }
/* tarjeta compacta: siempre deja ver el recorrido alrededor (al menos 36 px a cada lado en el celular) */
.v-info__caja {
  position: relative; width: min(420px, calc(100vw - 72px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 22px; border-radius: 14px; background: rgba(20, 20, 20, 0.95); display: grid; gap: 12px; align-content: start;
}
/* el título reserva el alto y el ancho del botón de cerrar, para que el texto nunca quede debajo de él */
.v-info__caja h2 { margin: 0; min-height: 36px; padding-right: 44px; display: flex; align-items: center; font-size: 21px; line-height: 1.2; color: var(--acento); }
.v-info__caja p { margin: 0; line-height: 1.55; }
.v-info__caja img { width: 100%; border-radius: 8px; }
.v-info__caja .v-reservar { justify-self: start; }
.v-info-cerrar { position: absolute; top: 14px; right: 14px; width: 36px; min-height: 36px; background: rgba(255, 255, 255, 0.08); }
.v-info-cerrar svg { width: 18px; height: 18px; }

/* VR: punto de mira por ojo (centro de cada mitad) con anillo de progreso */
.v-mira { display: none; }
.v-en-vr .v-mira {
  display: block; position: absolute; z-index: 50; top: 50%; left: 25%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  pointer-events: none;
}
.v-en-vr .v-mira::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--acento) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.35) 0);
  -webkit-mask: radial-gradient(circle, transparent 7px, #000 8px); mask: radial-gradient(circle, transparent 7px, #000 8px);
}
.v-en-vr .v-mira--der { left: 75%; }
.v-en-vr .v-mira span { position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.v-en-vr .v-mira--activa span { background: var(--acento); }
.v-en-vr .v-arriba, .v-en-vr .v-abajo, .v-en-vr .v-credito, .v-en-vr .v-menu { display: none; }

@media (max-width: 560px) {
  .v-info__caja { padding: 18px; gap: 10px; max-height: 62vh; }
  .v-info__caja h2 { font-size: 19px; }
  .v-info__caja p { font-size: 15px; }
  .v-info__caja img { max-height: 30vh; object-fit: cover; }
  .v-menu-texto { display: none; }
  .v-menu-boton { width: 44px; padding: 0; }
  .v-reservar { padding: 0 14px; font-size: 14px; }
}
/* celular en horizontal: tarjeta más baja */
@media (max-height: 480px) {
  .v-info__caja { max-height: 78vh; width: min(420px, calc(100vw - 120px)); }
}
@media (prefers-reduced-motion: reduce) {
  .v-pin__punto { animation: none; }
  .v-menu, .v-menu--abierto, .v-menu-fondo, .v-menu .v-menu__categoria { transition: none; }
}

/* ayuda para montar recorridos (?coordenadas) */
.v-coordenadas {
  position: absolute; z-index: 60; top: 70px; left: 14px; margin: 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.8); color: #9EE493; font: 13px/1.5 ui-monospace, Consolas, monospace; pointer-events: none;
}
.v-coordenadas:empty { display: none; }