/* Estilos específicos para videos verticales en el panel de riesgos */

/* Contenedor principal para videos verticales */
.video-vertical-container {
  max-height: 70vh !important;
  max-width: 480px !important;
  width: auto !important;
  margin: 16px auto !important; /* margen superior solicitado */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Estilos para elementos de video verticales */
.video-vertical {
  max-height: 70vh !important;
  max-width: 480px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Estilos para videos horizontales (comportamiento por defecto) */
.video-horizontal {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Refuerzo para asegurar centrado y ajuste en cualquier modo */
.video-vertical-container, .video-horizontal-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.video-vertical, .video-horizontal {
  display: block !important;
  margin: 0 auto !important;
}

/* Asegurar que los canvas overlay mantengan proporciones correctas */
.canvas-overlay-vertical {
  max-height: 70vh !important;
  max-width: 480px !important;
  width: auto !important;
  margin: 16px auto !important;
}

/* Alternativa sin tocar el DOM: cuando el contenedor tenga la clase vertical,
   los canvas internos heredan las restricciones automáticamente */
.zona-trabajo-vertical canvas {
  max-height: 70vh !important;
  max-width: 480px !important;
  width: auto !important;
  margin: 16px auto !important;
}

/* Zona de trabajo específica para videos verticales */
.zona-trabajo-vertical {
  max-height: 70vh !important;
  max-width: 480px !important;
  width: auto !important;
  margin: 16px auto !important; /* margen superior solicitado */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 768px) {
  .video-vertical-container,
  .video-vertical,
  .zona-trabajo-vertical {
    max-height: 60vh !important;
    max-width: 360px !important;
  }

  .canvas-overlay-vertical,
  .zona-trabajo-vertical canvas {
    max-height: 60vh !important;
    max-width: 360px !important;
  }
}

@media (max-width: 480px) {
  .video-vertical-container,
  .video-vertical,
  .zona-trabajo-vertical {
    max-height: 50vh !important;
    max-width: 280px !important;
  }

  .canvas-overlay-vertical,
  .zona-trabajo-vertical canvas {
    max-height: 50vh !important;
    max-width: 280px !important;
  }
}

/* Asegurar que los controles del reproductor sean visibles */
.video-vertical .controls,
.video-vertical-container .controls {
  width: 100% !important;
  max-width: 480px !important;
}

/* Responsive para pantallas muy pequeñas */
@media (max-width: 320px) {
  .video-vertical-container,
  .video-vertical,
  .zona-trabajo-vertical {
    max-height: 45vh !important;
    max-width: 220px !important;
  }

  .canvas-overlay-vertical,
  .zona-trabajo-vertical canvas {
    max-height: 45vh !important;
    max-width: 220px !important;
  }
}
/* Overrides específicos para Panel de Conteo de Video
   - Reducen la altura (largo) de videos verticales para que no tapen los controles
   - Mantienen el ancho máximo existente (480px) heredado de las clases verticales
*/
.panel-conteo .zona-trabajo-vertical {
  height: auto !important;        /* ignora h-96 / h-[500px] del contenedor en Conteo */
  max-height: 60vh !important;    /* más corto que Riesgos (70vh) */
}

.panel-conteo .video-vertical-container,
.panel-conteo .video-vertical {
  max-height: 60vh !important;
}

.panel-conteo .zona-trabajo-vertical canvas,
.panel-conteo .canvas-overlay-vertical {
  max-height: 60vh !important;
}

/* Breakpoints ajustados solo para Conteo de Video */
@media (max-width: 768px) {
  .panel-conteo .zona-trabajo-vertical,
  .panel-conteo .video-vertical-container,
  .panel-conteo .video-vertical,
  .panel-conteo .zona-trabajo-vertical canvas,
  .panel-conteo .canvas-overlay-vertical {
    max-height: 50vh !important;
  }
}

@media (max-width: 480px) {
  .panel-conteo .zona-trabajo-vertical,
  .panel-conteo .video-vertical-container,
  .panel-conteo .video-vertical,
  .panel-conteo .zona-trabajo-vertical canvas,
  .panel-conteo .canvas-overlay-vertical {
    max-height: 45vh !important;
  }
}

@media (max-width: 320px) {
  .panel-conteo .zona-trabajo-vertical,
  .panel-conteo .video-vertical-container,
  .panel-conteo .video-vertical,
  .panel-conteo .zona-trabajo-vertical canvas,
  .panel-conteo .canvas-overlay-vertical {
    max-height: 42vh !important;
  }
}
/* Overrides horizontales específicos para Panel de Conteo de Video
   - Limita la altura (largo) de videos horizontales para que no oculten botones inferiores
   - Mantiene el ancho natural (max-width ya gestionado por .video-horizontal)
*/
.panel-conteo .zona-trabajo-horizontal {
  height: auto !important;
  max-height: 70vh !important;
}

.panel-conteo .video-horizontal-container,
.panel-conteo .video-horizontal {
  max-height: 70vh !important;
}

/* Ajustes responsivos para horizontales en Conteo */
@media (max-width: 768px) {
  .panel-conteo .zona-trabajo-horizontal,
  .panel-conteo .video-horizontal-container,
  .panel-conteo .video-horizontal {
    max-height: 60vh !important;
  }
}

@media (max-width: 480px) {
  .panel-conteo .zona-trabajo-horizontal,
  .panel-conteo .video-horizontal-container,
  .panel-conteo .video-horizontal {
    max-height: 55vh !important;
  }
}

@media (max-width: 320px) {
  .panel-conteo .zona-trabajo-horizontal,
  .panel-conteo .video-horizontal-container,
  .panel-conteo .video-horizontal {
    max-height: 50vh !important;
  }
}