/* Estilos personalizados para Video.js */
.video-container {
  max-width: 800px;
  margin: 30px auto;
}

.video-js .vjs-progress-control {
  display: none;
}

.video-js .vjs-live-control {
  display: flex !important;
}

.vjs-live-display {
  display: none !important;
}

.video-js .vjs-control-bar {
  background: none !important;
  bottom: 10px !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

.video-js .vjs-play-control,
.video-js .vjs-volume-panel {
  background: rgba(34, 40, 49, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-right: none !important;
  border-left: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.video-js .vjs-at-live-edge {
  background: rgba(34, 40, 49, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  margin: 0 10px !important;
  border-radius: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  margin-left: 3px !important;
}

.video-js .vjs-play-control {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  margin-right: 0 !important;
}

.video-js .vjs-volume-panel {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  margin-left: 0 !important;
}

.video-js .vjs-play-control:hover,
.video-js .vjs-volume-panel:hover {
  background: rgba(34, 40, 49, 0.5) !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  transform: scale(1.02) !important;
}

.video-js .vjs-seek-to-live-control {
  border-radius: 12px !important;
  margin: 0 15px !important;
  padding: 0 12px !important;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
  margin-right: 15px !important;
}

.video-js .vjs-volume-control {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}

.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control {
  background: rgba(34, 40, 49, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-right: none !important;
  border-left: none !important;
  transition: all 0.3s ease !important;
}

.video-js .vjs-picture-in-picture-control {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  margin-right: 0 !important;
}

.video-js .vjs-fullscreen-control {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  margin-left: 0 !important;
}

.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control {
  position: relative !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.video-js .vjs-picture-in-picture-control:hover,
.video-js .vjs-fullscreen-control:hover {
  background: rgba(34, 40, 49, 0.5) !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  transform: scale(1.02) !important;
}

.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}