/* El contenedor ocupa todo menos el header */
#wrap{
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  background: var(--color-bg);
  display: grid;
}

/* El player se ajusta al contenedor (Video.js usa .vjs-fluid) */
#video360 {
  width: 100%;
  height: 100%;
}

/* Ajustes de skin con tu paleta */
.video-js {
  color: var(--color-text);
}
.vjs-control-bar {
  background: rgba(33,33,33,.55);             /* sobre el video */
  border-top: 1px solid var(--stroke);
}
.vjs-play-progress,
.vjs-volume-level {
  background: var(--color-primary);           /* acento teal */
}
.vjs-slider,
.vjs-load-progress {
  background: rgba(255,255,255,.25);
}
.vjs-big-play-button {
  border: 1px solid var(--color-primary);
  background: rgba(0,0,0,.35);
}
.vjs-big-play-button:hover {
  background: rgba(0,0,0,.55);
  transform: translateY(-1px);
}

/* Marca de agua centrada abajo */
.watermark{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 9000;
  opacity: .9;
  pointer-events: none;
}
.watermark img{
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
}

/* Texto informativo */
.footer-info{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px; /* un poco arriba de la watermark y la barra */
  z-index: 9000;
  color: #fff;
  background: rgba(33,33,33,.65);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 480px){
  .watermark img{ height: 26px; }
  .footer-info{ bottom: 50px; font-size: 12px; }
}

/* Quita el padding-top del modo fluid que crea la franja negra */
.video-js.vjs-fluid {
  padding-top: 0 !important;
  height: 100% !important;
}

/* Asegura que el player y el canvas llenen el contenedor */
#wrap { top: var(--header-h); left: 0; right: 0; bottom: 0; position: absolute; }
#video360,
.video-js {
  width: 100% !important;
  height: 100% !important;
}

/* Panorama/Three ocupa todo el área */
.video-js .vjs-tech,
.video-js canvas,
.video-js .vjs-panorama,
.video-js .vjs-panorama video,
.video-js .vjs-panorama canvas {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}


/* El contenedor del player debe ser relativo para estratificar capas */
.video-js { position: relative !important; }

/* Canvas / video del panorama atrás */
.video-js .vjs-tech,
.video-js canvas,
.video-js .vjs-panorama,
.video-js .vjs-panorama video,
.video-js .vjs-panorama canvas {
  z-index: 1 !important;
}

/* Barra de controles siempre arriba */
.video-js .vjs-control-bar {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 10010 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Botón grande centrado, también por encima del canvas */
.video-js .vjs-big-play-button {
  z-index: 10010 !important;
}

/* Overlays propios por debajo de los controles para no taparlos */
.watermark,
.footer-info {
  z-index: 10000 !important;   /* menor que la control bar */
  pointer-events: none;         /* no bloquea clics */
}