/* BaseForum — Visor 360° (vehiculo.css) · Mobile-first */

/* ── Topbar ── */
.v-header-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bf-bg);
}
.v-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--app-padding-mob);
  border-bottom: 1px solid var(--bf-line);
}
.v-topbar__back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink);
}
.v-topbar__pieza {
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}

/* ── Título ── */
.v-header {
  padding: 20px var(--app-padding-mob) 8px;
}
.v-titulo {
  font-size: clamp(32px, 6vw, 60px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-top: 10px;
}
.v-subtitulo {
  font-family: var(--bf-font-display);
  font-size: 14px;
  font-weight: 300;
  color: var(--bf-ink-2);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 10px;
}

/* ── Visor 360° ── */
.viewer360-wrap {
  padding: 12px var(--app-padding-mob) 0;
}

.viewer360 {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  background: var(--bf-bg-sunken);
  cursor: grab;
  overflow: hidden;
  user-select: none;
  border: 1px solid var(--bf-line-soft);
  border-radius: var(--radius-md);
  touch-action: pan-y;
}
.viewer360:active { cursor: grabbing; }

.viewer360__canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer360__label-tl,
.viewer360__label-tr {
  position: absolute;
  top: 12px;
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  opacity: 0.8;
}
.viewer360__label-tl { left: 12px; }
.viewer360__label-tr { right: 12px; }

.viewer360__hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bf-bg-sunken);
  border: 1px solid var(--bf-line-soft);
  border-radius: var(--radius-full);
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-ink-2);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.viewer360__hint.hidden { opacity: 0; }

/* Barra de progreso */
.viewer360__progress-track {
  position: relative;
  height: 2px;
  background: var(--bf-line-soft);
  margin-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.viewer360__progress-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  transition: width 0.08s;
  border-radius: inherit;
}

/* Marcadores de hotspot en la barra */
.hs-marker {
  position: absolute;
  top: -3px;
  width: 8px; height: 8px;
  background: var(--bf-gualda);
  border: 1px solid var(--bf-bg);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* ── Hotspots ── */
#hotspots-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hotspot {
  pointer-events: all;
}
.hotspot__card {
  pointer-events: all;
}

/* ── Ficha técnica ── */
.v-stats {
  margin: 20px var(--app-padding-mob) 0;
  border-top: 1px solid var(--bf-line);
  border-left: 1px solid var(--bf-line);
}

/* ── Cuerpo: texto + audio ── */
.v-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 28px var(--app-padding-mob) 40px;
}
.v-texto {
  font-size: 15px;
  line-height: 1.65;
  margin-top: 14px;
  color: var(--bf-ink);
}
/* El texto viene de un editor enriquecido: además de <p> puede traer <h2>,
   <h3> y listas. La regla anterior era solo `p + p`, y como el reset global
   pone `margin: 0` a todos los encabezados, un <h3> se quedaba pegado al
   párrafo de arriba Y al de abajo. Ahora separa cualquier bloque, con más aire
   sobre los encabezados y menos bajo ellos, que es lo que los agrupa con su
   texto. */
.v-texto > * + * { margin-top: 14px; }
.v-texto h2,
.v-texto h3 { margin-top: 24px; line-height: 1.25; }
.v-texto h2 + *,
.v-texto h3 + * { margin-top: 8px; }
.v-texto ul,
.v-texto ol { padding-left: 22px; }
.v-texto li + li { margin-top: 6px; }
.v-audio .audio-player { position: relative; }

/* ── Desktop ── */
@media (min-width: 769px) {
  .v-topbar   { padding: 18px var(--app-padding-x); }
  .v-header   { padding: 28px var(--app-padding-x) 12px; }

  .viewer360-wrap { padding: 16px var(--app-padding-x) 0; }
  .viewer360  { aspect-ratio: 16/9; max-height: 520px; }

  .v-stats {
    margin: 24px var(--app-padding-x) 0;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .v-body {
    grid-template-columns: 1.3fr 1fr;
    gap: 36px;
    padding: 32px var(--app-padding-x) 56px;
  }
}

/* ── Ancho máximo del contenido (pantallas anchas) ────────────────────
   Mismo criterio que el resto del sitio: el visor 3D es una pieza gráfica y
   usa la caja ancha; el texto y la ficha usan la caja de lectura. Los bloques
   con línea propia (la barra superior) se recogen con padding en vez de
   max-width, para que su línea siga cruzando entera y se lea como banda.
   Va después del bloque de escritorio a propósito: aquel declara `padding`
   con el atajo y pisaría estos `padding-inline` si fuera antes.
   Por debajo de 1280/1600 los `max()` no hacen nada, así que móvil y tablet
   se quedan exactamente como estaban. */
@media (min-width: 769px) {
  .v-topbar,
  .viewer360-wrap {
    padding-inline: max(var(--app-padding-x), (100% - var(--app-max-width-bar)) / 2);
  }

  .v-header,
  .v-body {
    padding-inline: max(var(--app-padding-x), (100% - var(--app-max-width)) / 2);
  }

  /* Esta se posiciona con márgenes, no con padding: la limitamos y centramos.
     Sus bordes son parte de la propia rejilla de datos, no separadores de
     sección, así que acompañan al contenido sin problema. */
  .v-stats {
    max-width: var(--app-max-width);
    margin-inline: auto;
  }
}