:root{
  --vg-menu-bg: #263238;
  --vg-accent:  #F2C200;
  --vg-text:    #E9EEF5;
  --vg-muted:   rgba(233,238,245,.72);
  --vg-radius:  18px;
  --vg-shadow:  0 22px 55px rgba(0,0,0,.45);
}

/* Contenedor (no toca body) */
.video-guibis-reproductor{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--vg-text);
  width: 100%;
}

/* ===== TOPBAR ===== */
.video-guibis-reproductor .vg-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.video-guibis-reproductor .vg-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

.video-guibis-reproductor .vg-topbar-title{
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .95;
}

/* Logo pequeño */
.video-guibis-reproductor .vg-topbar-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  padding: 6px;
}

/* Player */
.video-guibis-reproductor .vg-player{
  position: relative;
  width: 100%;
  background: #000;
  border-radius: var(--vg-radius);
  overflow: hidden;
  box-shadow: var(--vg-shadow);
}

/* Aspect ratio default 16:9 */
.video-guibis-reproductor .vg-player::before{
  content:"";
  display:block;
  padding-top: 56.25%;
}

.video-guibis-reproductor .vg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

/* Controles */
.video-guibis-reproductor .vg-controls{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: color-mix(in srgb, var(--vg-menu-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  opacity:1;
  transition: opacity .18s ease;
}

.video-guibis-reproductor.vg-hide-ui .vg-controls{
  opacity:0;
  pointer-events:none;
}

.video-guibis-reproductor .vg-btn{
  border:0;
  background: rgba(255,255,255,.08);
  color: var(--vg-text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  user-select:none;
}

.video-guibis-reproductor .vg-btn:hover{ background: rgba(255,255,255,.14); }
.video-guibis-reproductor .vg-btn.vg-active{
  outline: 2px solid color-mix(in srgb, var(--vg-accent) 75%, transparent);
}

.video-guibis-reproductor .vg-time{
  font-variant-numeric: tabular-nums;
  color: var(--vg-muted);
  min-width: 110px;
  text-align:center;
  user-select:none;
  white-space:nowrap;
}

.video-guibis-reproductor .vg-sep{ opacity:.6; margin: 0 6px; }

.video-guibis-reproductor .vg-seek{
  flex:1;
  min-width:120px;
  accent-color: var(--vg-accent);
  cursor:pointer;
}

.video-guibis-reproductor .vg-vol{
  width:110px;
  accent-color: var(--vg-accent);
  cursor:pointer;
}

@media (max-width: 640px){
  .video-guibis-reproductor .vg-vol{ display:none; }
  .video-guibis-reproductor .vg-time{ min-width: 90px; }
}